Reference generated from the custom elements manifest — 5 properties, 1 slots, 2 events.
PLAYGROUND3 CONTROLS
PREVIEW / al-toggle-button / SOUTHLEFT
Loading preview
Text Label
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 stateAXEtoggle-button--BackgroundPASS
Advanced statesAXE17 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 18 STORIES.
import '@southleft/al-web-components/components/toggle-button';
import { ALToggleButton } from '@southleft/al-react';
API — 5 PROPS5 DOCUMENTED
PROPTYPEDEFAULT
variant'background'Variant
- **default** renders the toggle button without background styles
- **background** renders the toggle button with background styles—
labelstringAccessible name for an icon-only toggle button. Visible slotted text supplies
the name when this property is omitted.—
isSelectedbooleanIndicates the selected state of the toggle button.false
isSmallbooleanIf true, a fixed width will be set on the button.
- Dynamically set based on the slotted component—
hasTogglebooleanHas toggle?
- Dynamically enabled when the first slotted element is an ALPopover or ALMenu.
- **true** toggles the isSelected state on activation.
- **false** selects on activation; Escape or an outside click can deselect.—
SLOTS1
SLOTDESCRIPTION
(default)The content to display in the toggle button
EVENTS2
EVENTDESCRIPTIONTYPE
onToggleButtonSelectFired when the button becomes selected. Detail: `{ item, selected }`.CustomEvent
onToggleButtonDeselectFired when the button becomes deselected. Detail: `{ item, selected }`.CustomEvent
PUBLIC METHODS5
METHODDESCRIPTION
setIsSmall()Set is small 1. If the toggle button content width is less than 48, then set isSmall to true to remove the padding.
toggleSelected()Toggle toggle button selected state 1. Toggle the selected state between true and false 2. Select/deselect the toggle button based on isSelected
handleOnClick()Handle on click 1. If the toggle button is clicked, toggle the selected state
handleOnKeydown()Handle on keydown Enter and Space use the same selection behavior as a click; Escape deselects.
handleOnClickOutside()Handles the click event outside the component: 1. Check if the toggle button is selected 2. Determine if the click occurred inside the selected toggle button 3. Check if the click occurred outside the selected toggle button 4. Close the toggle button if the click occurred outside it