COMPONENTS / MOLECULES / al-empty-state← ALL COMPONENTS

Empty State

<al-empty-state><ALEmptyState> REACTbetaOPEN IN FIGMA ↗

A centered "nothing here yet" placeholder — empty search results, empty tables/lists, zero-data dashboard states.

PLAYGROUND0 CONTROLS
PREVIEW / al-empty-state / ALTITUDE
Loading preview
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
FIGMA AHEADAltitude Design SystemFIGMA SET · Empty State1 PROPERTY DIFFFROM TRACKED PROJECTION
The Figma set changed since the last confirmed sync — the code is behind.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
2 ATTR · 2 SLOT · 0 EVENT · 1 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
PROPERTYDISAGREEMENTCODE / CANVAS
Text[prop] missing-in-code— / Text
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEempty-state--DefaultPASS
Advanced statesAXE3 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
MEASURED 2026-09-08 · 4 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 4 STORIES.
INSTALL@southleft/al-web-components/components/empty-state
import '@southleft/al-web-components/components/empty-state';
import { ALEmptyState } from '@southleft/al-react';
API — 2 PROPS2 DOCUMENTED
PROPTYPEDEFAULT
headingstringThe empty-state heading.—
descriptionstringSupporting description text.—
SLOTS2
SLOTDESCRIPTION
iconOptional icon or illustration, rendered above the heading.
actionsOptional action row (buttons/links), rendered below the description.
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
CSS PARTS1
PARTDESCRIPTION
container—
SOURCE — components/empty-state/empty-state.ts · Molecules/Empty State