Reference generated from the custom elements manifest — 6 properties, 3 slots, 2 events.
PLAYGROUND4 CONTROLS
PREVIEW / al-alert / ALTITUDE
Loading preview
Tokens v2 ships next week.
variant
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
NOT IN FIGMAAltitude Design System
This component exists in code and has no Figma component set.
DECIDED BY
NEVER SYNCED
FIGMA SIDE
NEVER OBSERVED
LAST CONFIRMED SYNC
NEVER
PUBLIC SURFACE
6 ATTR · 3 SLOT · 2 EVENT · 0 PART
The two sides have never been confirmed equal, so there is no baseline to compare against.
Known missing in Figma (altitude-figma-sync MISSING_IN_FIGMA) — needs a bespoke build.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEalert--DangerPASS
Advanced statesAXE11 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 12 STORIES.
import '@southleft/al-web-components/components/alert';
import { ALAlert } from '@southleft/al-react';
API — 6 PROPS6 DOCUMENTED
PROPTYPEDEFAULT
variant'success' | 'warning' | 'danger'Variants
- **default** renders a alert that represents an informative state
- **success** renders a alert that represents a success state
- **warning** renders a alert that represents a warning state
- **danger** renders a alert that represents an danger state—
titlestringOptional title of the alert—
isActivebooleanisActive boolean
- If true, the alert displays on the page
- If false, the alert is hidden from the page—
autoClosebooleanAuto close?
- Set whether you want the alert to auto close. Adjust the autoCloseDelay if you want longer than 3 secondsfalse
autoCloseDelaynumberAuto close delay
1. Number of seconds to close the alert when autoClose is enabled
2. Default amount is 33
isDismissiblebooleanDismissible?
- If true, displays a close button with close functionality on the alert—
SLOTS3
SLOTDESCRIPTION
actionOptional action control displayed with the alert content.
(default)The alert's main content or title
iconSlot in an icon to override the default one
EVENTS2
EVENTDESCRIPTIONTYPE
openFired when the alert becomes visible. Detail: `{ active }` — the new visibility state. Note this event name is unprefixed, unlike the rest of the library.CustomEvent
closeFired when the alert is dismissed. Detail: `{ active }` — the new visibility state. Note this event name is unprefixed, unlike the rest of the library.CustomEvent
PUBLIC METHODS3
METHODDESCRIPTION
handleMouseOver()Mouseover event 1. On mouseover of the alert, clear the timer to pause auto close
handleMouseLeave()Mouseleave event 1. Resume auto close with a new timeout
handleAutoClose()Auto close 1. Automatically close the alert after delay time