## Import

```jsx
import { Avatar } from "@cfa/react-core";
```

## Live Editor

```jsx
<Avatar.Root>
  <Avatar.Fallback />
</Avatar.Root>
```

## Examples

### Fallback

The `<Avatar.Fallback />` is defaulted to the `<User />` icon from `@cfa/system-icons`. You may also pass in your own fallback of an text or icon.

```jsx
<div style={{ display: "flex", gap: 8 }}>
  <Avatar.Root>
    <Avatar.Fallback />
  </Avatar.Root>

  <Avatar.Root>
    <Avatar.Fallback>FB</Avatar.Fallback>
  </Avatar.Root>

  <Avatar.Root>
    <Avatar.Fallback>
      <Clock />
    </Avatar.Fallback>
  </Avatar.Root>
</div>
```

### Image

Use `<Avatar.Image />` to pass a custom image to the Avatar.

```jsx
<div style={{ display: "flex", gap: 8 }}>
  <Avatar.Root>
    <Avatar.Image
      src="https://picsum.photos/id/1027/200/300"
      alt="avatar image"
    />
    <Avatar.Fallback />
  </Avatar.Root>

  <Avatar.Root>
    <Avatar.Image src="https://invalid-url.xyz" alt="avatar image" />
    <Avatar.Fallback />
  </Avatar.Root>
</div>
```

### Color

Through the `color` prop there are two color options: `"primary"` as default, and `"secondary"`.

```jsx
<div style={{ display: "flex", gap: 8 }}>
  <Avatar.Root color="primary" />
  <Avatar.Root color="secondary" />
</div>
```

### Size

The `size` prop has four options: `"md"` as default, and `"xs"`, `"sm"`, and `"lg"`.

```jsx
<div style={{ display: "flex", gap: 8 }}>
  <Avatar.Root size="xs" variant="filled" />
  <Avatar.Root size="sm" variant="filled" />
  <Avatar.Root size="md" variant="filled" />
  <Avatar.Root size="lg" variant="filled" />
</div>
```

### Variant

The `variant` prop has two options: `"filled"` as default, and `"outlined"`.

```jsx
<div
  style={{ display: "flex", gap: 8, backgroundColor: "#ecedee", padding: 16 }}
>
  <Avatar.Root variant="filled">
    <Avatar.Fallback />
  </Avatar.Root>
  <Avatar.Root variant="outlined">
    <Avatar.Fallback />
  </Avatar.Root>
</div>
```

### With Tooltip

Using a `Tooltip` with the `Avatar` requires the use of the `Focusable` component or wrapping the `Avatar` in a `BaseButton`.

```jsx
<Tooltip.Root>
  <Focusable>
    <Avatar.Root role="button">
      <Avatar.Fallback>JD</Avatar.Fallback>
    </Avatar.Root>
  </Focusable>
  <Tooltip.Content>Content</Tooltip.Content>
</Tooltip.Root>
```

## Props

### Avatar.Root

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| children | `ReactNode` | - | The content or child elements nested within this component. |
| className | `string` | - | CSS class names to apply custom styling. |
| color | `"primary" \ | "secondary"` | `primary` | Color of the Avatar. |
| id | `string` | - | The unique identifier for the DOM element. |
| role | `AriaRole` | - | The ARIA role assigned to the element to improve accessibility.&#xA;Example roles include "button", "navigation", "dialog", etc. |
| size | `"xs" \ | "sm" \ | "md" \ | "lg"` | `md` | Size of the Avatar. |
| style | `CSSProperties` | - | Inline styles specified as a React-compatible CSS properties object. |
| variant | `"filled" \ | "outlined"` | `filled` | Filled or outlined Avatar. |
| key | `Key` | - | - |
| ref | `Ref<HTMLSpanElement>` | - | Allows getting a ref to the component instance.&#xA;Once the component unmounts, React will set \`ref.current\` to \`null\`&#xA;(or call the ref with \`null\` if you passed a callback ref).&#xA;@see \{@link https\://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |

### Avatar.Image

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| about | `string` | - | - |
| accessKey | `string` | - | - |
| alt | `string` | - | - |
| aria-activedescendant | `string` | - | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
| aria-atomic | `Booleanish` | - | Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. |
| aria-autocomplete | `"list" \ | "none" \ | "inline" \ | "both"` | - | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be&#xA;presented if they are made. |
| aria-braillelabel | `string` | - | Defines a string value that labels the current element, which is intended to be converted into Braille.&#xA;@see aria-label. |
| aria-brailleroledescription | `string` | - | Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.&#xA;@see aria-roledescription. |
| aria-busy | `Booleanish` | - | - |
| aria-checked | `boolean \ | "true" \ | "false" \ | "mixed"` | - | Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.&#xA;@see aria-pressed&#xA;@see aria-selected. |
| aria-colcount | `number` | - | Defines the total number of columns in a table, grid, or treegrid.&#xA;@see aria-colindex. |
| aria-colindex | `number` | - | Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.&#xA;@see aria-colcount&#xA;@see aria-colspan. |
| aria-colindextext | `string` | - | Defines a human readable text alternative of aria-colindex.&#xA;@see aria-rowindextext. |
| aria-colspan | `number` | - | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.&#xA;@see aria-colindex&#xA;@see aria-rowspan. |
| aria-controls | `string` | - | Identifies the element (or elements) whose contents or presence are controlled by the current element.&#xA;@see aria-owns. |
| aria-current | `boolean \ | "true" \ | "false" \ | "page" \ | "step" \ | "location" \ | "date" \ | "time"` | - | Indicates the element that represents the current item within a container or set of related elements. |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object.&#xA;@see aria-labelledby |
| aria-description | `string` | - | Defines a string value that describes or annotates the current element.&#xA;@see related aria-describedby. |
| aria-details | `string` | - | Identifies the element that provides a detailed, extended description for the object.&#xA;@see aria-describedby. |
| aria-disabled | `Booleanish` | - | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.&#xA;@see aria-hidden&#xA;@see aria-readonly. |
| aria-dropeffect | `"link" \ | "none" \ | "copy" \ | "execute" \ | "move" \ | "popup"` | - | Indicates what functions can be performed when a dragged object is released on the drop target.&#xA;@deprecated in ARIA 1.1 |
| aria-errormessage | `string` | - | Identifies the element that provides an error message for the object.&#xA;@see aria-invalid&#xA;@see aria-describedby. |
| aria-expanded | `Booleanish` | - | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| aria-flowto | `string` | - | Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,&#xA;allows assistive technology to override the general default of reading in document source order. |
| aria-grabbed | `Booleanish` | - | Indicates an element's "grabbed" state in a drag-and-drop operation.&#xA;@deprecated in ARIA 1.1 |
| aria-haspopup | `boolean \ | "dialog" \ | "grid" \ | "listbox" \ | "menu" \ | "tree" \ | "true" \ | "false"` | - | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| aria-hidden | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API.&#xA;@see aria-disabled. |
| aria-invalid | `boolean \ | "true" \ | "false" \ | "grammar" \ | "spelling"` | - | Indicates the entered value does not conform to the format expected by the application.&#xA;@see aria-errormessage. |
| aria-keyshortcuts | `string` | - | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. |
| aria-label | `string` | - | Defines a string value that labels the current element.&#xA;@see aria-labelledby. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element.&#xA;@see aria-describedby. |
| aria-level | `number` | - | Defines the hierarchical level of an element within a structure. |
| aria-live | `"off" \ | "assertive" \ | "polite"` | - | Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. |
| aria-modal | `Booleanish` | - | Indicates whether an element is modal when displayed. |
| aria-multiline | `Booleanish` | - | Indicates whether a text box accepts multiple lines of input or only a single line. |
| aria-multiselectable | `Booleanish` | - | Indicates that the user may select more than one item from the current selectable descendants. |
| aria-orientation | `"horizontal" \ | "vertical"` | - | Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. |
| aria-owns | `string` | - | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship&#xA;between DOM elements where the DOM hierarchy cannot be used to represent the relationship.&#xA;@see aria-controls. |
| aria-placeholder | `string` | - | Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.&#xA;A hint could be a sample value or a brief description of the expected format. |
| aria-posinset | `number` | - | Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.&#xA;@see aria-setsize. |
| aria-pressed | `boolean \ | "true" \ | "false" \ | "mixed"` | - | Indicates the current "pressed" state of toggle buttons.&#xA;@see aria-checked&#xA;@see aria-selected. |
| aria-readonly | `Booleanish` | - | Indicates that the element is not editable, but is otherwise operable.&#xA;@see aria-disabled. |
| aria-relevant | `"text" \ | "additions" \ | "additions removals" \ | "additions text" \ | "all" \ | "removals" \ | "removals additions" \ | "removals text" \ | "text additions" \ | "text removals"` | - | Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.&#xA;@see aria-atomic. |
| aria-required | `Booleanish` | - | Indicates that user input is required on the element before a form may be submitted. |
| aria-roledescription | `string` | - | Defines a human-readable, author-localized description for the role of an element. |
| aria-rowcount | `number` | - | Defines the total number of rows in a table, grid, or treegrid.&#xA;@see aria-rowindex. |
| aria-rowindex | `number` | - | Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.&#xA;@see aria-rowcount&#xA;@see aria-rowspan. |
| aria-rowindextext | `string` | - | Defines a human readable text alternative of aria-rowindex.&#xA;@see aria-colindextext. |
| aria-rowspan | `number` | - | Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.&#xA;@see aria-rowindex&#xA;@see aria-colspan. |
| aria-selected | `Booleanish` | - | Indicates the current "selected" state of various widgets.&#xA;@see aria-checked&#xA;@see aria-pressed. |
| aria-setsize | `number` | - | Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.&#xA;@see aria-posinset. |
| aria-sort | `"none" \ | "ascending" \ | "descending" \ | "other"` | - | Indicates if items in a table or grid are sorted in ascending or descending order. |
| aria-valuemax | `number` | - | Defines the maximum allowed value for a range widget. |
| aria-valuemin | `number` | - | Defines the minimum allowed value for a range widget. |
| aria-valuenow | `number` | - | Defines the current value for a range widget.&#xA;@see aria-valuetext. |
| aria-valuetext | `string` | - | Defines the human readable text alternative of aria-valuenow for a range widget. |
| autoCapitalize | `"none" \ | (string & {}) \ | "off" \ | "on" \ | "sentences" \ | "words" \ | "characters"` | - | - |
| autoCorrect | `string` | - | - |
| autoFocus | `boolean` | - | - |
| autoSave | `string` | - | - |
| className | `string` | - | - |
| color | `string` | `primary` | - |
| content | `string` | - | - |
| contentEditable | `Booleanish \ | "inherit" \ | "plaintext-only"` | - | - |
| contextMenu | `string` | - | - |
| crossOrigin | `CrossOrigin` | - | - |
| dangerouslySetInnerHTML | `{ __html: string \ | TrustedHTML; }` | - | - |
| datatype | `string` | - | - |
| decoding | `"async" \ | "auto" \ | "sync"` | - | - |
| defaultChecked | `boolean` | - | - |
| defaultValue | `string \ | number \ | readonly string[]` | - | - |
| dir | `string` | - | - |
| draggable | `Booleanish` | - | - |
| enterKeyHint | `"search" \ | "enter" \ | "done" \ | "go" \ | "next" \ | "previous" \ | "send"` | - | - |
| exportparts | `string` | - | @see \{@link https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/exportparts} |
| fetchPriority | `"auto" \ | "high" \ | "low"` | - | - |
| height | `string \ | number` | - | - |
| hidden | `boolean` | - | - |
| id | `string` | - | - |
| inert | `boolean` | - | @see https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert |
| inlist | `any` | - | - |
| inputMode | `"none" \ | "search" \ | "text" \ | "tel" \ | "url" \ | "email" \ | "numeric" \ | "decimal"` | - | Hints at the type of data that might be entered by the user while editing the element or its contents&#xA;@see \{@link https\://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} |
| is | `string` | - | Specify that a standard HTML element should behave like a defined custom built-in element&#xA;@see \{@link https\://html.spec.whatwg.org/multipage/custom-elements.html#attr-is} |
| itemID | `string` | - | - |
| itemProp | `string` | - | - |
| itemRef | `string` | - | - |
| itemScope | `boolean` | - | - |
| itemType | `string` | - | - |
| key | `Key` | - | - |
| lang | `string` | - | - |
| loading | `"eager" \ | "lazy"` | - | - |
| nonce | `string` | - | - |
| onAbort | `ReactEventHandler<HTMLImageElement>` | - | - |
| onAbortCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLImageElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLImageElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLImageElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLImageElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLImageElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLImageElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLImageElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLImageElement>` | - | - |
| onBeforeInput | `InputEventHandler<HTMLImageElement>` | - | - |
| onBeforeInputCapture | `FormEventHandler<HTMLImageElement>` | - | - |
| onBeforeToggle | `ToggleEventHandler<HTMLImageElement>` | - | - |
| onBlur | `FocusEventHandler<HTMLImageElement>` | - | - |
| onBlurCapture | `FocusEventHandler<HTMLImageElement>` | - | - |
| onCanPlay | `ReactEventHandler<HTMLImageElement>` | - | - |
| onCanPlayCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onCanPlayThrough | `ReactEventHandler<HTMLImageElement>` | - | - |
| onCanPlayThroughCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onChange | `FormEventHandler<HTMLImageElement>` | - | - |
| onChangeCapture | `FormEventHandler<HTMLImageElement>` | - | - |
| onClick | `MouseEventHandler<HTMLImageElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLImageElement>` | - | - |
| onCompositionEnd | `CompositionEventHandler<HTMLImageElement>` | - | - |
| onCompositionEndCapture | `CompositionEventHandler<HTMLImageElement>` | - | - |
| onCompositionStart | `CompositionEventHandler<HTMLImageElement>` | - | - |
| onCompositionStartCapture | `CompositionEventHandler<HTMLImageElement>` | - | - |
| onCompositionUpdate | `CompositionEventHandler<HTMLImageElement>` | - | - |
| onCompositionUpdateCapture | `CompositionEventHandler<HTMLImageElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLImageElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLImageElement>` | - | - |
| onCopy | `ClipboardEventHandler<HTMLImageElement>` | - | - |
| onCopyCapture | `ClipboardEventHandler<HTMLImageElement>` | - | - |
| onCut | `ClipboardEventHandler<HTMLImageElement>` | - | - |
| onCutCapture | `ClipboardEventHandler<HTMLImageElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLImageElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLImageElement>` | - | - |
| onDrag | `DragEventHandler<HTMLImageElement>` | - | - |
| onDragCapture | `DragEventHandler<HTMLImageElement>` | - | - |
| onDragEnd | `DragEventHandler<HTMLImageElement>` | - | - |
| onDragEndCapture | `DragEventHandler<HTMLImageElement>` | - | - |
| onDragEnter | `DragEventHandler<HTMLImageElement>` | - | - |
| onDragEnterCapture | `DragEventHandler<HTMLImageElement>` | - | - |
| onDragExit | `DragEventHandler<HTMLImageElement>` | - | - |
| onDragExitCapture | `DragEventHandler<HTMLImageElement>` | - | - |
| onDragLeave | `DragEventHandler<HTMLImageElement>` | - | - |
| onDragLeaveCapture | `DragEventHandler<HTMLImageElement>` | - | - |
| onDragOver | `DragEventHandler<HTMLImageElement>` | - | - |
| onDragOverCapture | `DragEventHandler<HTMLImageElement>` | - | - |
| onDragStart | `DragEventHandler<HTMLImageElement>` | - | - |
| onDragStartCapture | `DragEventHandler<HTMLImageElement>` | - | - |
| onDrop | `DragEventHandler<HTMLImageElement>` | - | - |
| onDropCapture | `DragEventHandler<HTMLImageElement>` | - | - |
| onDurationChange | `ReactEventHandler<HTMLImageElement>` | - | - |
| onDurationChangeCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onEmptied | `ReactEventHandler<HTMLImageElement>` | - | - |
| onEmptiedCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onEncrypted | `ReactEventHandler<HTMLImageElement>` | - | - |
| onEncryptedCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onEnded | `ReactEventHandler<HTMLImageElement>` | - | - |
| onEndedCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onError | `ReactEventHandler<HTMLImageElement>` | - | - |
| onErrorCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onFocus | `FocusEventHandler<HTMLImageElement>` | - | - |
| onFocusCapture | `FocusEventHandler<HTMLImageElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLImageElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLImageElement>` | - | - |
| onInput | `FormEventHandler<HTMLImageElement>` | - | - |
| onInputCapture | `FormEventHandler<HTMLImageElement>` | - | - |
| onInvalid | `FormEventHandler<HTMLImageElement>` | - | - |
| onInvalidCapture | `FormEventHandler<HTMLImageElement>` | - | - |
| onKeyDown | `KeyboardEventHandler<HTMLImageElement>` | - | - |
| onKeyDownCapture | `KeyboardEventHandler<HTMLImageElement>` | - | - |
| onKeyPress | `KeyboardEventHandler<HTMLImageElement>` | - | @deprecated Use \`onKeyUp\` or \`onKeyDown\` instead |
| onKeyPressCapture | `KeyboardEventHandler<HTMLImageElement>` | - | @deprecated Use \`onKeyUpCapture\` or \`onKeyDownCapture\` instead |
| onKeyUp | `KeyboardEventHandler<HTMLImageElement>` | - | - |
| onKeyUpCapture | `KeyboardEventHandler<HTMLImageElement>` | - | - |
| onLoad | `ReactEventHandler<HTMLImageElement>` | - | - |
| onLoadCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onLoadedData | `ReactEventHandler<HTMLImageElement>` | - | - |
| onLoadedDataCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onLoadedMetadata | `ReactEventHandler<HTMLImageElement>` | - | - |
| onLoadedMetadataCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onLoadStart | `ReactEventHandler<HTMLImageElement>` | - | - |
| onLoadStartCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLImageElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLImageElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLImageElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLImageElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLImageElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLImageElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLImageElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLImageElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLImageElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLImageElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLImageElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLImageElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLImageElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLImageElement>` | - | - |
| onPaste | `ClipboardEventHandler<HTMLImageElement>` | - | - |
| onPasteCapture | `ClipboardEventHandler<HTMLImageElement>` | - | - |
| onPause | `ReactEventHandler<HTMLImageElement>` | - | - |
| onPauseCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onPlay | `ReactEventHandler<HTMLImageElement>` | - | - |
| onPlayCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onPlaying | `ReactEventHandler<HTMLImageElement>` | - | - |
| onPlayingCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLImageElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLImageElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLImageElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLImageElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLImageElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLImageElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLImageElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLImageElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLImageElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLImageElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLImageElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLImageElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLImageElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLImageElement>` | - | - |
| onProgress | `ReactEventHandler<HTMLImageElement>` | - | - |
| onProgressCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onRateChange | `ReactEventHandler<HTMLImageElement>` | - | - |
| onRateChangeCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onReset | `FormEventHandler<HTMLImageElement>` | - | - |
| onResetCapture | `FormEventHandler<HTMLImageElement>` | - | - |
| onScroll | `UIEventHandler<HTMLImageElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLImageElement>` | - | - |
| onScrollEnd | `UIEventHandler<HTMLImageElement>` | - | - |
| onScrollEndCapture | `UIEventHandler<HTMLImageElement>` | - | - |
| onSeeked | `ReactEventHandler<HTMLImageElement>` | - | - |
| onSeekedCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onSeeking | `ReactEventHandler<HTMLImageElement>` | - | - |
| onSeekingCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onSelect | `ReactEventHandler<HTMLImageElement>` | - | - |
| onSelectCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onStalled | `ReactEventHandler<HTMLImageElement>` | - | - |
| onStalledCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onSubmit | `FormEventHandler<HTMLImageElement>` | - | - |
| onSubmitCapture | `FormEventHandler<HTMLImageElement>` | - | - |
| onSuspend | `ReactEventHandler<HTMLImageElement>` | - | - |
| onSuspendCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onTimeUpdate | `ReactEventHandler<HTMLImageElement>` | - | - |
| onTimeUpdateCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onToggle | `ToggleEventHandler<HTMLImageElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLImageElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLImageElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLImageElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLImageElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLImageElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLImageElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLImageElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLImageElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLImageElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLImageElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLImageElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLImageElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLImageElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLImageElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLImageElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLImageElement>` | - | - |
| onVolumeChange | `ReactEventHandler<HTMLImageElement>` | - | - |
| onVolumeChangeCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onWaiting | `ReactEventHandler<HTMLImageElement>` | - | - |
| onWaitingCapture | `ReactEventHandler<HTMLImageElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLImageElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLImageElement>` | - | - |
| part | `string` | - | @see \{@link https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/part} |
| popover | `"" \ | "auto" \ | "manual" \ | "hint"` | - | - |
| popoverTarget | `string` | - | - |
| popoverTargetAction | `"toggle" \ | "show" \ | "hide"` | - | - |
| prefix | `string` | - | - |
| property | `string` | - | - |
| radioGroup | `string` | - | - |
| ref | `Ref<HTMLImageElement>` | - | Allows getting a ref to the component instance.&#xA;Once the component unmounts, React will set \`ref.current\` to \`null\`&#xA;(or call the ref with \`null\` if you passed a callback ref).&#xA;@see \{@link https\://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
| referrerPolicy | `HTMLAttributeReferrerPolicy` | - | - |
| rel | `string` | - | - |
| resource | `string` | - | - |
| results | `number` | - | - |
| rev | `string` | - | - |
| role | `AriaRole` | - | - |
| security | `string` | - | - |
| sizes | `string` | - | - |
| slot | `string` | - | - |
| spellCheck | `Booleanish` | - | - |
| src | `string` | - | - |
| srcSet | `string` | - | - |
| style | `CSSProperties` | - | - |
| suppressContentEditableWarning | `boolean` | - | - |
| suppressHydrationWarning | `boolean` | - | - |
| tabIndex | `number` | - | - |
| title | `string` | - | - |
| translate | `"yes" \ | "no"` | - | - |
| typeof | `string` | - | - |
| unselectable | `"off" \ | "on"` | - | - |
| useMap | `string` | - | - |
| vocab | `string` | - | - |
| width | `string \ | number` | - | - |

### Avatar.Fallback

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children | `ReactNode` | - | The text, image, or icon of the Avatar.Fallback. |

```
```