COMPONENTS / MOLECULES / al-banner← ALL COMPONENTS

Banner

<al-banner><ALBanner> REACTbetaOPEN IN FIGMA ↗

A page-level, full-width announcement bar — distinct from `<al-alert>` (which is a card-surfaced, contextual message).

PLAYGROUND2 CONTROLS
PREVIEW / al-banner / ALTITUDE
Loading preview
We're rolling out a new theming engine this week — some screens may look slightly different. Learn more
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
CODE AHEADAltitude Design SystemFIGMA SET · Banner8 PROPERTY DIFFSFROM TRACKED PROJECTION
The component changed since the last confirmed sync — the Figma set is behind.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
2 ATTR · 3 SLOT · 1 EVENT · 0 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
theme/border/radius/@[token-binding] missing-in-canvas--al-theme-border-radius / —
theme/border/width/@[token-binding] missing-in-canvas--al-theme-border-width / —
theme/color/background/transparent-default[token-binding] missing-in-canvas--al-theme-color-background-transparent-default / —
theme/color/border/neutral-default[token-binding] missing-in-canvas--al-theme-color-border-neutral-default / —
theme/icon/lg[token-binding] missing-in-code— / theme/icon/lg
theme/icon/md[token-binding] missing-in-code— / theme/icon/md
theme/size/control[token-binding] missing-in-canvas--al-theme-size-control / —
theme/space/xxs[token-binding] missing-in-code— / theme/space/xxs
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEbanner--CustomIconPASS
Advanced statesAXE2 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 · 3 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 3 STORIES.
INSTALL@southleft/al-web-components/components/banner
import '@southleft/al-web-components/components/banner';
import { ALBanner } from '@southleft/al-react';
API — 2 PROPS2 DOCUMENTED
PROPTYPEDEFAULT
isDismissiblebooleanWhether the banner shows a dismiss control.—
isDismissedbooleanWhether the banner has been dismissed. Owned state, toggled by `close()`.—
SLOTS3
SLOTDESCRIPTION
(default)The banner's message content.
linkOptional trailing link/CTA (typically an `<al-link>`).
iconSlot in an icon to override the default one.
EVENTS1
EVENTDESCRIPTIONTYPE
onBannerCloseFired when the banner is dismissed. Detail: `{ isDismissed }`.CustomEvent
CSS CUSTOM PROPERTIES1
PROPERTYDESCRIPTIONDEFAULT
--al-banner-icon-fillFill of the leading icon. Defaults to the informational content color; set it to any content token to retone the banner (e.g. `var(--al-theme-color-content-danger-default)`).—
SOURCE — components/banner/banner.ts · Molecules/Banner