Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
ToggleButton
Designer doc
In addition to the ordinary button widget, WAI-ARIA also supports Toggle button.
A two-state button that can be either off (not pressed) or on (pressed). To tell assistive technologies that a button is a toggle button, specify a value for the attribute aria-pressed. For example, a button labelled mute in an audio player could indicate that sound is muted by setting the pressed state true. Important: it is critical the label on a toggle does not change when its state changes. In this example, when the pressed state is true, the label remains “Mute” so a screen reader would say something like “Mute toggle button pressed”. Alternatively, if the design were to call for the button label to change from “Mute” to “Unmute,” the aria-pressed attribute would not be needed.
TODO: add tri-state mixed support. An example is Bluetooth and Wifi buttons in iOS Control Center.
The aria-pressed attribute is similar but not identical to the aria-checked attribute. Operating systems support pressed on buttons and checked on checkboxes.
View code
References
WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/button/
API
ToggleButton
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| initialPressed | boolean | ||
| keyboardClickKeys | string[] | ||
| leftIcon | ReactNode | Element before the label. Equivalent to element on the label with some margin. | |
| loading | boolean | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onToggle | (pressed: boolean) => void | ||
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| pressed | boolean | ||
| radius | number | ||
| rightIcon | ReactNode | Element after the label. Equivalent to element on the label with some margin. | |
| size | ButtonSizes | ||
| variant | ButtonVariants | Prefers naming it as variant because type is a known button html property. |