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
Blogs
All blogsBaseButton
An accessible button.
This unstyled component exists to standardise the wild behaviour across browsers, especially built-in button element. A button should be tabable, autofocus on click, and follow keyboard interactions and properties as described in WAI-ARIA specifications. With that reason, div - enriched with proper listeners and attributes is used as default element instead of button.
Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a data-focus-visible-added attribute to the focused element, in situations in which the :focus-visible pseudo-selector should match. data-focus-visible-added attribute is used instead of .focus-visible class because React overwrites your classes on rerender.
This selector is useful to provide a different focus indicator based on the user’s input modality (mouse vs. keyboard).
Example
Basic usage
Save...
Disabled
Call promise
View code
References
- WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/button/
- CSSWG: https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
API
BaseButton
| 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. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ['Enter', ' '] | |
| 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. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> |