Avatar
The Avatar component provides a reusable pattern for avatar in the interface.
Image
Name
Icon
API
| Parameter | Default | Type | Description |
|---|---|---|---|
|
image
|
false | ComponentLibrary\Integrations\Image\ImageInterface|string|boolean | The profile image source. |
|
icon
|
[] | array | Attributes for the nested Icon component. |
|
name
|
string | The person's full name. | |
|
size
|
md | string | The avatar size. |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-avatar--base
|
var(--base) | range | - | Main unit that drives radius and spacing scales. |
|
--c-avatar--color--secondary
|
var(--color--secondary) | color | - | Background color |
|
--c-avatar--corner-shape
|
var(--corner-shape) | select | square, round, squircle, circular, bevel, scoop | Shape |
|
--c-avatar--color--secondary-contrast
|
var(--color--secondary-contrast) | color | - | Icon & initials color |