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. |