Components
Avatar
Represents a user or entity with an image, initials, or fallback icon. Supports groups and tooltips.
import{ Avatar }from"oks-ui"
Image & initials6 sizes7 color rolesAvatarGroupTooltip support
Basic
Display user initials or an image.
Sizes
Avatars are available in multiple sizes.
Interactive Playground
Controls
Preview
Generated Code
<Avatar />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | User name used for initials fallback. |
| src | string | — | Image source URL. |
| size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | "md" | Avatar size. |
| color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "default" | Fallback background color. |
| radius | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full" | "full" | Border radius. |
| isBordered | boolean | false | Show a border ring. |
| isDisabled | boolean | false | Reduce opacity. |
| icon | ReactNode | — | Custom fallback icon. |
| fallback | ReactNode | — | Custom fallback content. |
name—
string
User name used for initials fallback.
src—
string
Image source URL.
size"md"
"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"
Avatar size.
color"default"
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"
Fallback background color.
radius"full"
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | "full"
Border radius.
isBorderedfalse
boolean
Show a border ring.
isDisabledfalse
boolean
Reduce opacity.
icon—
ReactNode
Custom fallback icon.
fallback—
ReactNode
Custom fallback content.