---
title: FAB
description: A floating action button for the screen's primary action.
---
import Source from './_generated/fab.mdx';

A floating action button for a screen's single most important action. Android renders the MD3 primary-container surface with elevation and a ripple. iOS has no FAB idiom, so it renders as a floating circular glass button — pragmatic and consistent with the rest of the iOS chrome.

<DemoFrame component="fab" />

## Installation

```bash
npx touchcn add fab
```

## Usage

<CodeGroup>

```html Angular
<button tcnFab aria-label="Add">
  <svg><!-- icon --></svg>
</button>

<button tcnFab extended>
  <svg><!-- icon --></svg>
  <span>Compose</span>
</button>
```

```tsx React
import { TcnFab } from '@/components/ui/fab';

<TcnFab aria-label="Add">
  <PlusIcon />
</TcnFab>

<TcnFab extended>
  <PlusIcon />
  <span>Compose</span>
</TcnFab>
```

```vue Vue
<script setup lang="ts">
import { TcnFab } from '@/components/ui/fab';
</script>

<template>
  <TcnFab aria-label="Add">
    <PlusIcon />
  </TcnFab>

  <TcnFab extended>
    <PlusIcon />
    <span>Compose</span>
  </TcnFab>
</template>
```

</CodeGroup>

Drop the FAB inline, or add the `tcn-fab-fixed` helper class to dock it in the bottom-right corner, clearing the tabbar and the home-indicator safe area automatically.

## Props

| Prop       | Type                     | Default     | Description                          |
| ---------- | ------------------------ | ----------- | ------------------------------------ |
| `size`     | `'regular' \| 'small'`   | `'regular'` | 56 / 40 px circular button.          |
| `extended` | `boolean`                | `false`     | Widen into an icon + label pill.     |
| `disabled` | `boolean`                | `false`     | Disable interaction.                 |

<Source />