# @commercetools-uikit/accessible-button
> A React component that you can use to wrap your buttons in an accessible element.
Latest version **20.6.7** (published 2026-07-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install @commercetools-uikit/accessible-button
pnpm add @commercetools-uikit/accessible-button
yarn add @commercetools-uikit/accessible-button
bun add @commercetools-uikit/accessible-button
```
## Health
**Score 70/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 20.6.7 |
| Published | 2026-07-17 |
| First published | 2019-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 67.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 154 |
| Maintainers | emmenko, commercetools-admin, tdeekens |
| Keywords | javascript, typescript, design-system, react, uikit |
## Links
- npm: https://www.npmjs.com/package/@commercetools-uikit/accessible-button
- Repository: https://github.com/commercetools/ui-kit
- Homepage: https://uikit.commercetools.com
- Issues: https://github.com/commercetools/ui-kit/issues
- npm.io page: https://npm.io/package/@commercetools-uikit/accessible-button
## Dependencies (9)
- [lodash](https://npm.io/package/lodash.md) 4.18.1
- [react-is](https://npm.io/package/react-is.md) 19.2.6
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.5
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.5
- [@types/react-is](https://npm.io/package/@types/react-is.md) 19.2.0
- [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.20.13
- [@commercetools-uikit/utils](https://npm.io/package/@commercetools-uikit/utils.md) ^20.6.7
- [@commercetools-uikit/design-system](https://npm.io/package/@commercetools-uikit/design-system.md) ^20.6.7
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 20.6.7 (latest) — 2026-07-17
- 0.0.0-canary-20260831181816 (canary) — 2026-08-31
- 0.0.0-FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize-20260518121756 (FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize) — 2026-05-18
- 0.0.0-migration-pnpm-20260513114959 (migration-pnpm) — 2026-05-13
- 0.0.0-CRAFT-2040-rich-text-input-destroys-hyperlink-tag-20260219190637 (CRAFT-2040-rich-text-input-destroys-hyperlink-tag) — 2026-02-19
- 0.0.0-fec-155-react-19-20250528075244 (fec-155-react-19) — 2025-05-28
- 0.0.0-FCT-1500-adjust-legacy-css-reset-20250527090339 (FCT-1500-adjust-legacy-css-reset) — 2025-05-27
- 0.0.0-SUPPORT-32352-de-ch-money-input-20250509174254 (SUPPORT-32352-de-ch-money-input) — 2025-05-09
- 0.0.0-main-20250115172531 (main) — 2025-01-15
- 0.0.0-preview-fec-155-react-19-20250113184401 (preview-fec-155-react-19) — 2025-01-13
- 0.0.0-preview-test-icon-entrypoints-20241212201418 (preview-test-icon-entrypoints) — 2024-12-12
- 0.0.0-preview-test-icon-pure-annotations-20241211181046 (preview-test-icon-pure-annotations) — 2024-12-11
- 0.0.0-preview-test-icon-bundle-20241210182318 (preview-test-icon-bundle) — 2024-12-10
- 0.0.0-preview-test-canary-preview-20241204111237 (preview-test-canary-preview) — 2024-12-04
- 0.0.0-preview-FCT-1187-20241024123200 (preview) — 2024-10-24
- … 1013 more at https://npm.io/package/@commercetools-uikit/accessible-button/versions
## README
# AccessibleButton
## Description
A React component that you can use to wrap your buttons in an accessible \ element.
## Installation
```
pnpm add @commercetools-uikit/accessible-button
```
```
npm --save install @commercetools-uikit/accessible-button
```
Additionally install the peer dependencies (if not present)
```
pnpm add react
```
```
npm --save install react
```
## Usage
```jsx
import AccessibleButton from '@commercetools-uikit/accessible-button';
// The `AccessibleButton` component is intended to be used as a wrapper
// for your actual button component.
const Example = (props) => (
{}}>
Log in
);
export default Example;
```
## Properties
| Props | Type | Required | Default | Description |
| ------------------ | ---------------------------------------------------------------- | :------: | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `as` | `union` Possible values: `string , ComponentType` | | | By default the component renders a `button` element. You can pass an optional `React.ElemenType`
in case this needs to be rendered as a different element. |
| `id` | `string` | | | The ID of the element. |
| `type` | `union` Possible values: `'submit' , 'reset' , 'button'` | | `'button'` | The [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) of the `button` element. |
| `label` | `string` | ✅ | | The aria-label value. |
| `children` | `ReactNode` | ✅ | | Any React node. |
| `isToggleButton` | `boolean` | | `false` | If `true`, indicates that this is a toggle button. |
| `isToggled` | `boolean` | | `false` | If `true`, indicates that this element is in a toggled state.
This prop is only used if `isToggleButton` is `true`. |
| `isDisabled` | `boolean` | | | If `true`, indicates that the element is in a disabled state. |
| `className` | `string` | | | Allow to override the styles by passing a `className` prop.
Custom styles can also be passed using the [`css` prop from emotion](https://emotion.sh/docs/css-prop#style-precedence). |
| `onClick` | `Function` [See signature.](#signature-onclick) | | | Event handler when the button is clicked, or the user presses `ENTER` or `SPACE`. |
| `buttonAttributes` | `Record` | | `{}` | Any HTML attributes to be forwarded to the HTML element. |
## Signatures
### Signature `onClick`
```ts
(
event: MouseEvent | KeyboardEvent
) => void
```
## How does it work?
### Using a ``
> If you can use a native HTML element or attribute with the semantics and
> behavior you require already built in, instead of re-purposing an element and
> adding an ARIA role, state or property to make it accessible, then do so.
This means that instead of using a `` to create a button we should use the
`` element.
The problem with using the `` element for creating a button is that in
[some browsers the `` element cannot be used as a flex
container](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers).
To solve both problems at once we need to nest a `` inside the
``. This `` contains the actual button content, like the label
and/or an icon.
### Toggle buttons
In order to indicate to screen readers that a button is a toggle button — meaning
that it will keep the active state once clicked — you need to set the
`aria-pressed` attribute accordingly.
This is automatically done when you specify the `isToggled` property. If this
prop is omitted though we don't set the `aria-pressed` attribute at all so
screen readers to not mistake our button for a toggle button.
### Icon buttons
In order for screen readers to know what a button does we need to provide a
proper label. The `` element is able to figure out the `aria-label` on
its own for simple buttons that only contain text.
For buttons that contain an icon however the default `aria-label` would also
contain the icon, which probably our screenreader does not know how to read out
😉.
So we need to manually set the `aria-label` attribute. You need to do so by
providing the `label` prop.
### Disabled buttons
In order for screen readers to know if your button is disabled we need to set the
`aria-disabled` and `disabled` attributes on the button. We do so automatically
if you set the `isDisabled` prop to true.
## References
- [Rules for using ARIA in
HTML](https://bitsofco.de/rules-for-using-aria-in-html/) by Ire Aderinokun
- [Using the button
role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role)
by MDN
- [Flexbugs](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers)
by Philip Walton
---
_Source: https://npm.io/package/@commercetools-uikit/accessible-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._