# @fluentui/react-button

> Fluent UI React Button component.

Latest version **9.11.1** (published 2026-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/react-button
pnpm add @fluentui/react-button
yarn add @fluentui/react-button
bun add @fluentui/react-button
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.11.1 |
| Published | 2026-09-21 |
| First published | 2020-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20293 |
| Maintainers | uifabricteam, uifrnbot, microsoft1es, microsoft-oss-releases |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-button
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-button

## Dependencies (10)

- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.1
- [@griffel/react](https://npm.io/package/@griffel/react.md) ^1.5.32
- [@fluentui/react-aria](https://npm.io/package/@fluentui/react-aria.md) ^9.17.15
- [@fluentui/react-icons](https://npm.io/package/@fluentui/react-icons.md) ^2.0.245
- [@fluentui/react-theme](https://npm.io/package/@fluentui/react-theme.md) ^9.2.2
- [@fluentui/keyboard-keys](https://npm.io/package/@fluentui/keyboard-keys.md) ^9.0.9
- [@fluentui/react-tabster](https://npm.io/package/@fluentui/react-tabster.md) ^9.26.18
- [@fluentui/react-utilities](https://npm.io/package/@fluentui/react-utilities.md) ^9.26.7
- [@fluentui/react-jsx-runtime](https://npm.io/package/@fluentui/react-jsx-runtime.md) ^9.4.6
- [@fluentui/react-shared-contexts](https://npm.io/package/@fluentui/react-shared-contexts.md) ^9.26.4

## Recent versions

- 9.11.1 (latest) — 2026-09-21
- 0.0.0-nightly-20260929-0404.1 (nightly) — 2026-09-29
- 9.74.5-experimental.tabster-v9.20260804-bb909442fe.0 (experimental) — 2026-08-04
- 0.20.16 (lts-7) — 2022-10-31
- 9.0.0-rc.14 (rc) — 2022-06-21
- 9.0.0-beta.5 (beta) — 2021-11-25
- 9.0.0-alpha.101 (alpha) — 2021-10-05
- 0.0.0-nightly-20260928-0404.1 — 2026-09-28
- 0.0.0-nightly-20260925-0403.1 — 2026-09-25
- 0.0.0-nightly-20260924-0403.1 — 2026-09-24
- 0.0.0-nightly-20260923-0404.1 — 2026-09-23
- 0.0.0-nightly-20260922-0403.1 — 2026-09-22
- 0.0.0-nightly-20260917-0408.1 — 2026-09-17
- 0.0.0-nightly-20260916-0409.1 — 2026-09-16
- 0.0.0-nightly-20260915-0407.1 — 2026-09-15
- … 1613 more at https://npm.io/package/@fluentui/react-button/versions

## README

# @fluentui/react-button

**Button components for [Fluent UI React](https://react.fluentui.dev/)**

- Buttons enable users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
- CompoundButtons are buttons that can have secondary content that adds extra information to the user.
- MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close menus.
- SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary action, while interacting with the second one opens a menu with secondary actions.
- ToggleButtons are buttons that toggle between two defined states when triggered.

## Usage

To import Button:

```js
import { Button, CompoundButton, MenuButton, SplitButton, ToggleButton } from '@fluentui/react-components';
```

### Examples

### Button

```jsx
<Button>Submit</Button>
<Button icon={<SVGIcon />} />
<Button icon={<SVGIcon />}>Submit</Button>
<Button icon={<SVGIcon />} iconPosition="after">Submit</Button>
<Button appearance="primary">Submit</Button>
<Button disabled>Submit</Button>
<Button size="small">Submit</Button>
<Button size="large">Submit</Button>
```

### CompoundButton

```jsx
<CompoundButton icon={<CalendarMonth />} secondaryContent="Secondary content" {...props}>
  Example
</CompoundButton>
```

### MenuButton

```jsx
<Menu>
  <MenuTrigger>
    <MenuButton>Example</MenuButton>
  </MenuTrigger>

  <MenuPopover>
    <MenuList>
      <MenuItem>Item a</MenuItem>
      <MenuItem>Item b</MenuItem>
    </MenuList>
  </MenuPopover>
</Menu>
```

### SplitButton

```jsx
<Menu positioning="below-end">
  <MenuTrigger>
    {(triggerProps: MenuButtonProps) => <SplitButton menuButton={triggerProps}>Example</SplitButton>}
  </MenuTrigger>

  <MenuPopover>
    <MenuList>
      <MenuItem>Item a</MenuItem>
      <MenuItem>Item b</MenuItem>
    </MenuList>
  </MenuPopover>
</Menu>
```

### ToggleButton

```jsx
<ToggleButton>Toggle volume</ToggleButton>
<ToggleButton defaultChecked={true}>Toggle volume</ToggleButton>
<ToggleButton checked={true}>Toggle volume</ToggleButton>
<ToggleButton checked={false}>Toggle volume</ToggleButton>
```

See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.

Alternatively, run Storybook locally with:

1. `yarn start`
2. Select `react-button` from the list.

### Specification

See [SPEC.md](./src/components/Button/SPEC.md).

### Migration Guide

If you're upgrading to Fluent UI v9 see [MIGRATION.md](./src/components/Button/MIGRATION.md) for guidance on updating to the latest component implementations.

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