Reference generated from the custom elements manifest — 3 properties, 2 slots, 0 events.
PLAYGROUND2 CONTROLS
PREVIEW / al-avatar / ALTITUDE
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 PARITYALTITUDE DESIGN SYSTEM
NOT IN FIGMAAltitude Design System
This component exists in code and has no Figma component set.
DECIDED BY
NEVER SYNCED
FIGMA SIDE
NEVER OBSERVED
LAST CONFIRMED SYNC
NEVER
PUBLIC SURFACE
3 ATTR · 2 SLOT · 0 EVENT · 0 PART
The two sides have never been confirmed equal, so there is no baseline to compare against.
Known missing in Figma (altitude-figma-sync MISSING_IN_FIGMA) — needs a bespoke build.
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.