Buttons consist of a clickable area usually containing a textual label or an icon that users can click to perform an action. In addition, keyboard users may activate buttons using the Space or Enter keys.
Button is a low-level primitive that provides WAI-ARIA accessibility semantics, keyboard interactions, and that normalizes touch, press, and click interactions across different devices and input modalities.
It allows user interactions, accessibility, internationalization, and behavior to be reused, while allowing custom styling and rendering to live within the definitions created for each product ecosystem.
Import
import {Button} from '@fuegokit/react'
Usage
Accessibility
If a visual label is not provided (e.g. an icon only button), then an aria-label or aria-labelledby prop must be passed to identify the button to assistive technology.
Anatomy
Buttons can have a label, a leading or trailing icon, or both.
An icon is provided by passing an icon component as a child to the Button's leadingIcon or trailingIcon props.
A visible label can be provided by passing a string or a Text component as a child, depending on whether the Button has an accompanying icon.
Button