import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import { AvatarBase } from './avatar-base'; ### This is a base component. It should not be used in your feature code directly but as a "base" for other UI components # AvatarBase The `AvatarBase` is a wrapper component responsible for enforcing dimensions and border radius for Avatar components ## Props The `AvatarBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props. ### Size Use the `size` prop to set the size of the `AvatarBase`. Possible sizes include: - `xs` 16px - `sm` 24px - `md` 32px - `lg` 40px - `xl` 48px Defaults to `md` The text styles of the `AvatarBase` is based on the `size` prop. To override this use the `Text` component's `variant` prop. `AvatarBase` also accepts all `Text` component props. ```jsx import { AVATAR_BASE_SIZES } from '../ui/component-library/avatar-base'; import { AvatarBase } from '../../component-library'; ``` ### Children The `AvatarBase` component can contain images, icons or text ```jsx import { AvatarBase } from '../../component-library'; A ``` ### Color, Background Color And Border Color Use the `color`, `backgroundColor` and `borderColor` props to set the text color, background-color and border-color of the `AvatarBase`. ```jsx import { TextColor, BackgroundColor, BorderColor } from '../../../helpers/constants/design-system'; import { AvatarBase } from '../../component-library'; B G S ```