Raw button component, for performing an action on the page you’re viewing.
npm install @paprika/raw-buttonRaw button component, for performing an action on the page you’re viewing.
``
yarn add @paprika/raw-button
or with npm:
`
npm install @paprika/raw-button
| Prop | Type | required | default | Description |
| ------------------ | ------ | -------- | -------- | --------------------------------------------------------------------------------------------------- |
| a11yText | string | false | null | Descriptive a11y text for assistive technologies. By default, text from children node will be used. |
| canPropagate | bool | false | true | If click events are allowed to propagate up the DOM tree. |
| children | node | true | - | Body content of the button. |
| hasInsetFocusStyle | bool | false | false | If the visual focus ring should be displayed with an inset style. |
| isActive | bool | false | null | If the button is in an "active" or "selected" state. |
| isDisabled | bool | false | false | If the button is disabled. |
| onClick | func | false | () => {} | Callback to be executed when the button is clicked or activated by keyboard. Typically required. |
| role | string | false | "button" | Value for role attribute to override the default of "button". |
| tabIndex | number | false | null | Value for tabindex attribute to override the default of 0. |
The component is a fully accessible button, rendered with almost no styling as a generic element. It is intended for use any time click actions are needed for a UI element that is not visually represented as a skeuomorphic button.
For accessibility, the role="button", tabIndex="0", and aria-disabled="false" attributes are added by default, but can be overridden. An aria-label can be included via the a11yText prop, a visual focus ring is applied, and keyboard listeners are included that will fire the onClick function when the user activates the component with an enter or space keypress.
`js
import RawButton from "@paprika/raw-button";
``
- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG