0.0.0 • Published 2 years ago
@wedgekit/avatar v0.0.0
Avatar
Purpose
The Avatar component displays information about a user.
Basic Implementation
import Avatar from '@wedgekit/avatar';
const Example = () => <Avatar color="T100">Bilbo Baggins</Avatar>;
render(<Example />);API
| Prop | Type | Required? | default | description |
|---|---|---|---|---|
| children | string | ✅ | A name or number that will be converted to initials or a count. If children is not provided or the component is used as a self closing component, Avatar will render a Plus icon. | |
| color | string | ✅ | A valid WedgeKit tag color. | |
| outline | boolean | ❌ | false | Whether or not the avatar is in outline mode. |
| size | "small" \| "medium" \| "large" | ❌ | medium | |
| dark | boolean | ❌ | false | Whether or not the focus state should be white. This is useful when the element is on a darker background and needs higher contrast for focus. |
| onClick | (HTMLClickEvent) => {} | ❌ | When present the avatar is interactive and can receive focus. Otherwise it will be for display only. |
0.0.0
2 years ago