# @bolttech/atoms-button

> A customizable React button component.

Latest version **0.29.6** (published 2026-06-08) · 0 weekly downloads

## Install

```sh
npm install @bolttech/atoms-button
pnpm add @bolttech/atoms-button
yarn add @bolttech/atoms-button
bun add @bolttech/atoms-button
```

## Health

**Score 50/100 (C)** — status: active.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.29.6 |
| Published | 2026-06-08 |
| First published | 2023-03-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 50 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | andsfranbolt, danielkhalebbatista, pauloazevedo-ed, bruno.gomes, plinio.altoe, joaoteixeira20, esteve-cabrera, jabolttech, lucasvpaiva, herberts.fortuna, matheus.maciel.bolttech, silas.silva.bolttech |

## Links

- npm: https://www.npmjs.com/package/@bolttech/atoms-button
- npm.io page: https://npm.io/package/@bolttech/atoms-button

## Dependencies (4)

- [react](https://npm.io/package/react.md) 19.1.2
- [styled-components](https://npm.io/package/styled-components.md) 6.1.1
- [@bolttech/ui-utils](https://npm.io/package/@bolttech/ui-utils.md) 0.6.7
- [@bolttech/atoms-icon](https://npm.io/package/@bolttech/atoms-icon.md) 0.24.9

## Recent versions

- 0.29.6 (latest) — 2026-06-08
- 0.29.5 — 2026-04-14
- 0.29.3 — 2026-04-08
- 0.29.2 — 2026-04-08
- 0.28.2 — 2026-03-05
- 0.29.0 — 2025-12-17
- 0.28.0 — 2025-07-08
- 0.27.1 — 2024-09-18
- 0.27.0 — 2024-09-04
- 0.26.2 — 2024-09-02
- 0.24.5 — 2024-09-02
- 0.26.1 — 2024-04-01
- 0.25.2 — 2024-03-04
- 0.25.1 — 2024-02-29
- 0.25.0 — 2024-02-26
- … 60 more at https://npm.io/package/@bolttech/atoms-button/versions

## README

# Button Component

A customizable React button component.

## Installation

Use the package manager [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install the component.

```bash
npm install @bolttech/frontend-foundations @bolttech/atoms-button
```

or

```bash
yarn add @bolttech/frontend-foundations @bolttech/atoms-button
```

## Props

The `Button` component accepts the following properties:

| Prop          | Type         | Description                                                                                                     |
|---------------|--------------|-----------------------------------------------------------------------------------------------------------------|
| dataTestId    | `string`     | The `data-testid` attribute for testing.                                                                         |
| disabled      | `boolean`    | Disables the button when set to `true`.                                                                        |
| title         | `string`     | The text content of the button.                                                                                |
| variant       | `string`     | The variant style of the button (e.g., `'primary'`, `'secondary'`, `'alternative'`).                           |
| size          | `string`     | The size of the button (e.g., `'sm'`, `'md'`, `'lg'`).                                                         |
| iconRight     | `string`     | The name of the icon to be displayed on the right side of the button.                                          |
| iconLeft      | `string`     | The name of the icon to be displayed on the left side of the button.                                           |
| fullWidth     | `boolean`    | Sets the button width to 100% if `true`.                                                                       |
| type          | `string`     | The type of the button (e.g., `'button'`, `'submit'`, `'reset'`).                                              |
| onClick       | `function`   | Callback function to handle the button click event.                                                            |

## Usage

```jsx
import React from 'react';
import {Button} from '@bolttech/atoms-button';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

const ExampleComponent = () => {
  const handleButtonClick = () => {
    // Logic to handle the button click event
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Button
        dataTestId="custom-button"
        disabled={false}
        title="Click Me"
        variant="primary"
        size="md"
        iconRight="arrow_forward"
        fullWidth={false}
        type="button"
        onClick={handleButtonClick}
      />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;
```

## Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an [issue](link-to-issues) or submit a pull request.

Please make sure to follow the code standards and test your changes before submitting.

---
_Source: https://npm.io/package/@bolttech/atoms-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._