npm package: @paprika/raw-button
Description: Raw button component, for performing an action on the page you’re viewing.
Author: @paprika
Latest version: 1.0.20

<!-- start: Autogenerated - do not modify -->

# @paprika/raw-button

## Description

Raw button component, for performing an action on the page you’re viewing.

## Installation

```
yarn add @paprika/raw-button
```

or with npm:

```
npm install @paprika/raw-button
```

## Props

### RawButton

| 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.                                          |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## RawButton

The `<RawButton>` component is a fully accessible button, rendered with almost no styling as a generic `<span>` 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.

### Usage

```js
import RawButton from "@paprika/raw-button";

<RawButton onClick={clickHandler}>Visible click target</RawButton>;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/buttons-rawbutton--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/RawButton/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/raw-button%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/RawButton/CHANGELOG.md)