Reference generated from the custom elements manifest — 3 properties, 2 slots, 0 events.
PLAYGROUND2 CONTROLS
PREVIEW / al-avatar / SOUTHLEFT
Loading preview
TC
badgeVariant
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYNOT TRACKED
NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEavatar--DefaultPASS
Advanced statesAXE11 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 12 STORIES.
import '@southleft/al-web-components/components/avatar';
import { ALAvatar } from '@southleft/al-react';
API — 3 PROPS3 DOCUMENTED
PROPTYPEDEFAULT
variant'sm'Avatar varaint
- **default** Renders an avatar with an height & width of 40px
- **sm** Renders an avatar with an height & width of 28px—
hasBadgebooleanHas Badge?
- If true, shows the badge on the outside of the avatar circle
- If false, hides the badge—
badgeVariant'success' | 'warning' | 'danger'Badge state variant
- **default** Displays a badge with the default state
- **success** renders a badge with success state treatment
- **warning** renders a badge with warning state treatment
- **danger** renders a badge with danger state treatment—
SLOTS2
SLOTDESCRIPTION
(default)The avatar content. Slot an `<img alt="…">` for a user photo, a single-letter initial string, or an `<al-icon-*>` placeholder. The host **renders as a circle by default** (no `variant` / `shape` attribute is needed for the circular form). The accessible name comes from slotted content — supply meaningful `alt` text on `<img>` or visible initials; a bare `aria-hidden` decorative avatar leaves the avatar unlabeled.
badgeOptional small status indicator rendered as a corner overlay (only honored when `hasBadge` is set).
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.