# @tabula/ui-button

> Button components which are used to initialize an action

Latest version **9.1.3** (published 2026-05-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install @tabula/ui-button
pnpm add @tabula/ui-button
yarn add @tabula/ui-button
bun add @tabula/ui-button
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.1.3 |
| Published | 2026-05-06 |
| First published | 2023-09-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 103.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Retable Inc. |
| Maintainers | tabula |
| Keywords | tabula.io, tomat.ai, ui-kit, component, react |

## Links

- npm: https://www.npmjs.com/package/@tabula/ui-button
- Repository: https://github.com/ReTable/ui-kit
- Homepage: https://github.com/ReTable/ui-kit/tree/main/components/ui-button#readme
- Issues: https://github.com/ReTable/ui-kit/issues
- npm.io page: https://npm.io/package/@tabula/ui-button

## Dependencies (1)

- [clsx](https://npm.io/package/clsx.md) ^2.1.1

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

- 9.1.3 (latest) — 2026-05-06
- 9.1.3-next.0 (next) — 2026-04-28
- 5.0.3-beta.0 (beta) — 2024-04-13
- 9.1.2 — 2025-09-24
- 9.1.1 — 2024-11-04
- 9.1.0 — 2024-10-24
- 9.1.0-next.0 — 2024-10-21
- 9.0.3 — 2024-10-07
- 9.0.2 — 2024-10-07
- 9.0.1 — 2024-09-18
- 9.0.0 — 2024-09-11
- 9.0.0-next.1 — 2024-09-11
- 9.0.0-next.0 — 2024-09-10
- 8.0.1 — 2024-08-16
- 8.0.0 — 2024-07-31
- … 26 more at https://npm.io/package/@tabula/ui-button/versions

## README

# @tabula/ui-button

Button components which are used to initialize an action.

## Installation

Use the package manager [pnpm](https://pnpm.io) to install `@tabula/ui-button`.

```bash
pnpm add @tabula/ui-button
```

You can use [npm](https://npmjs.com) or [yarn](https://yarnpkg.com) too.

## Usage

We provide five different button sizes with own visual styles:

- `UiButton20`
- `UiButton24`
- `UiButton32`
- `UiButton40`
- `UiButton48`

Import required component and render it with one of supported variants:

```tsx
import { FC, MouseEventHandler, PropsWithChildren } from 'react';

import { UiButton24 } from '@tabula/ui-button';

type Props = PropsWithChildren<{
  onClick: MouseEventHandler<HTMLButtonElement>;
}>;

const Action: FC<Props> = ({ children, onClick }) => (
  <UiButton24 onClick={onClick} variant='primary'>{children}</UiButton24>
)
```

## Types

The component supports four types: `button`, `a`, `div` and `link`. By default, the `button` type is used.

### Button

By default, the component renders generic button:

```tsx
<UiButton24 variant="primary">Default</UiButton24>
```

You can provide `as="button"` explicitly:

```tsx
<UiButton24 as="button" variant="primary">Button</UiButton24>
```

### Anchor

You can render `a` element with providing `as="button"`:

```tsx
  <UiButton24 as="a" href="#" target="_blank" variant="primary">Anchor</UiButton24>
```

### Div

In rare cases, you can render `div` element with providing `as="div"`:

```tsx
<UiButton24 as="div" variant="primary">Div</UiButton24>
```

### Link

You can use `as="link"` and provide `component` property to use `react-router`'s `Link` component:

```tsx
import { Link } from 'react-router-dom';

<UiButton24 as="link" component={Link} target="_blank" to="#" variant="contract">Link</UiButton24>
```

It can be useful, when you want to have `div` element with button appearance. For example, to render it inside
another `button` element.

## Variants

Each button component has its own appearance variants list, which you can use:

- `UiButton20`: `contract`;
- `UiButton24`: `primary`, `secondary`, `cancel`, `cancelFilled`, `edit`, `test` and `ai`;
- `UiButton32`: `primaryDesign`, `secondaryDesign`, `primaryList`, `secondaryList`, `dangerousList` and `shadowList`;
- `UiButton40`: `primary`, `secondary`, `secondaryBlue` and `secondaryFilled`;
- `UiButton48`: `primary` and `secondary`;

## Options

The component supports a few options.

### `isDisabled`

This property allows to disable button:

```tsx
<UiButton24 isDisabled variant="primary">Button</UiButton24>
```

### `isFrozen`

This property allows to disable button, but keep enabled look and feel:

```tsx
<UiButton24 isFrozen variant="primary">Button</UiButton24>
```

### `isDisabled` and `isFrozen`

The `isDisabled` styles has priority over `isFrozen` when they're used together.

```tsx
<UiButton24 isDisabled isFrozen variant="primary">Button</UiButton24>
```

### `icon`

You can provide an icon component:

```tsx
import { UiDateIcon } from '@tabula/ui-data-type-icon';

<UiButton24 icon={UiDateIcon} variant="primary">Open calendar</UiButton24>
```

We recommend use icons with size of `16x16`.

An icon component should support `className` property.

## Attributes

All component types supports relevant HTML attributes, excluding `aria-disabled` and `disabled`. These attributes are
controlled by the component itself.

Also `href` attribute is restricted `link` type.

For example, you can provide `data-*` attribute for analytics purposes:

```tsx
  <UiButton24 data-track-id="button" variant="primary">Button</UiButton24>
```

## License

This project is [ISC](https://choosealicense.com/licenses/isc/) licensed.

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