import { Canvas, Meta } from '@storybook/blocks';
import * as AvatarDirectiveStories from './avatar.stories';

<Meta title="Primitives/Avatar" />

# Avatar

#### An image element with a fallback for representing the user.

<Canvas sourceState="hidden" of={AvatarDirectiveStories.Default} />

## Features

- ✅ Automatic and manual control over when the image renders.
- ✅ Fallback part accepts any children.
- ✅ Optionally delayMs fallback rendering to avoid content flashing.

## Global Configuration

You can configure the default options for all avatars in your application by using the `provideRdxAvatarConfig` function in a providers array.

```ts
import { provideRdxAvatarConfig } from '@radix-ng/primitives/avatar';

bootstrapApplication(AppComponent, {
  providers: [provideRdxAvatarConfig({ delayMs: 1000 })]
});
```

## Anatomy

```html
<span rdxAvatarRoot>
  <img rdxAvatarImage src="..." alt="..." />
  <span rdxAvatarFallback>Angular</span>
</span>
```
