COMPONENTS / ATOMS / al-divider← ALL COMPONENTS

Divider

<al-divider><ALDivider> REACTbeta

Reference generated from the custom elements manifest — 1 properties, 0 slots, 0 events.

PLAYGROUND0 CONTROLS
PREVIEW / al-divider / SOUTHLEFT
Loading preview
Tokens are grouped into three tiers. Tier-3 is where a brand overrides a role.
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 stateAXEdivider--DefaultPASS
Advanced statesAXE1 further storyPASS
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
MEASURED 2026-09-08 · 2 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA
COLOR CONTRAST0 RULES FAILING
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 2 STORIES.
INSTALL@southleft/al-web-components/components/divider
import '@southleft/al-web-components/components/divider';
import { ALDivider } from '@southleft/al-react';
API — 1 PROPS1 DOCUMENTED
PROPTYPEDEFAULT
variant'vertical'Variant
- **default** A divider the displays horizontally
- **vertical** A divider the displays vertically—
SLOTS0
THIS COMPONENT DECLARES NO SLOTS IN THE MANIFEST.
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
SOURCE — components/divider/divider.ts · Atoms/Divider