Low-level button primitive that handles mouse, keyboard, and touch interactions, focus behavior, and ARIA props for both native button elements and custom element types.
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

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 {Button} from '@fuegokit/react'



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.


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.



Input methods

See also