d1a1135328
* docs: create a new UI docs project (#13233) * docs: create a new UI docs project * fix installation errors * docs: migrate UI docs content to new project (#13241) * Fix content * added examples for some components * finish adding examples * lint fix * fix build errors * delete empty files * path fixes + refactor * fix build error
60 lines
1.0 KiB
Plaintext
60 lines
1.0 KiB
Plaintext
import { ComponentExample } from "@/components/ComponentExample"
|
|
import { ComponentReference } from "@/components/ComponentReference"
|
|
|
|
export const metadata = {
|
|
title: `Avatar`,
|
|
}
|
|
|
|
# {metadata.title}
|
|
|
|
A component for displaying user avatars with a fallback option.
|
|
|
|
In this guide, you'll learn how to use the Avatar component.
|
|
|
|
<ComponentExample name="avatar-demo" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Avatar } from "@medusajs/ui"
|
|
```
|
|
|
|
```tsx
|
|
<Avatar
|
|
src="https://avatars.githubusercontent.com/u/10656202?v=4"
|
|
fallback="M"
|
|
/>
|
|
```
|
|
|
|
---
|
|
|
|
## API Reference
|
|
|
|
<ComponentReference mainComponent="Avatar" />
|
|
|
|
---
|
|
|
|
## Examples
|
|
|
|
### Avatar Variants
|
|
|
|
<ComponentExample name="avatar-variants" />
|
|
|
|
### Avatar Sizes
|
|
|
|
<ComponentExample name="avatar-sizes" />
|
|
|
|
### Avatar Fallback Only
|
|
|
|
<ComponentExample name="avatar-fallback" />
|
|
|
|
### Avatar Custom Styling
|
|
|
|
<ComponentExample name="avatar-custom-style" />
|
|
|
|
### Avatar Accessibility
|
|
|
|
You can add the `aria-label` prop to the Avatar component for better accessibility.
|
|
|
|
<ComponentExample name="avatar-accessible" hideFeedback />
|