Reference generated from the custom elements manifest — 3 properties, 1 slots, 0 events.
PLAYGROUND3 CONTROLS
PREVIEW / al-badge / ALTITUDE
Loading preview
Neutral
variant
position
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
BOTH CHANGEDAltitude Design SystemFIGMA SET · Badge1:1 ON EVERY PROPERTYFROM TRACKED PROJECTION
Code and Figma each changed since the last confirmed sync. Neither side should be overwritten blindly.
DECIDED BY
SOURCE HASH
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-22
PUBLIC SURFACE
3 ATTR · 1 SLOT · 0 EVENT · 0 PART
A sha1 of every .ts/.scss byte in the component directory, compared against the hash stored at the last sync. It cannot say what changed, and a comment edit moves it. Re-stamping this component records a contract digest instead.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEbadge--DefaultPASS
Advanced statesAXE13 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 14 STORIES.
import '@southleft/al-web-components/components/badge';
import { ALBadge } from '@southleft/al-react';
API — 3 PROPS3 DOCUMENTED
PROPTYPEDEFAULT
isDotbooleanisDot boolean
- Makes the badge a small dot only—
variant'neutral' | 'info' | 'success' | 'warning' | 'danger'State variant
- **neutral** renders the non-status badge, and is what an omitted
`variant` renders — named so the axis is expressible in code the way the
Figma set names it, rather than living as the absence of a value
- **info** renders a badge with info state treatment
- **success** renders a badge with success state treatment
- **warning** renders a badge with warning state treatment
- **danger** renders a badge with danger state treatment—
position'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'Positions the badge absolutely to its parent container.
- **top-left** places the badge to the top left
- **top-right** places the badge to the top right
- **bottom-left** places the badge to the bottom left
- **bottom-right** places the badge to the bottom right—
SLOTS1
SLOTDESCRIPTION
(default)The badge content
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
PUBLIC METHODS1
METHODDESCRIPTION
handlePosition()Handle position 1. If a position is defined, then apply position: relative to the direct parent element