Reference generated from the custom elements manifest — 3 properties, 1 slots, 0 events.
PLAYGROUND3 CONTROLS
PREVIEW / al-badge / SOUTHLEFT
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 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 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