Reference generated from the custom elements manifest — 7 properties, 3 slots, 2 events.
PLAYGROUND5 CONTROLS
PREVIEW / al-toast / SOUTHLEFT
Loading preview
Changes saved
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 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 stateAXEtoast--DangerPASS
Advanced statesAXE9 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 10 STORIES.
import '@southleft/al-web-components/components/toast';
import { ALToast } from '@southleft/al-react';
API — 7 PROPS6 DOCUMENTED
PROPTYPEDEFAULT
variant'info' | 'success' | 'warning' | 'danger'Variants
- **default** renders a toast that represents an informative state
- **success** renders a toast that represents a success state
- **warning** renders a toast that represents a warning state
- **danger** renders a toast that represents an danger state—
descriptionstringThe toast description text''
isActivebooleanIs active?
- **true** Displays the toast on the screen
- **false** Hides the toast on the screen—
isDismissiblebooleanIs dismissible?
- **false** If false, the toast will auto close after a delay
- **true** If true, this disables auto close and adds the ability for the user close the toast—
autoClosebooleanAuto close?
- Set whether you want the toast to auto close. Adjust the autoCloseDelay if you want longer than 3 seconds—
autoCloseDelaynumberDelay property
1. Number of seconds to close the toast when autoClose is enabled
2. Default amount is 33
showProgressboolean—
SLOTS3
SLOTDESCRIPTION
(default)The toast title or primary text
actionsActions to optionally display in the toast
iconSlot in an icon to override the default one
EVENTS2
EVENTDESCRIPTIONTYPE
onToastCloseFired when the toast is dismissed. Detail: `{ active }`.CustomEvent
onToastOpenFired when the toast becomes visible. Detail: `{ active }`.CustomEvent
PUBLIC METHODS4
METHODDESCRIPTION
handleAutoClose()Auto close handler 1. Automatically close the toast after delay time
handleKeyDown()Keydown event 1. If escape key is struck when the toast is active, dismiss it
handleMouseOver()Mouseover event 1. On mouseover of the toast, clear the timer to pause auto close
handleMouseLeave()Mouseleave event 1. Resume auto close with a new timeout