# Bottom Sheet

A panel that slides up for one focused task. Mobile docks with a grabber, and Web floats at 480.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/bottom-sheet
```

## Usage

```tsx
import { BottomSheet, BottomSheetAction } from '@/components/fetaui/bottom-sheet'
import { Button } from '@/components/fetaui/button'
import { LinkIcon } from '@fetaui/react/rounded/link'

export function Example() {
  return (
    <BottomSheet trigger={<Button>Actions</Button>} title="Feedback card">
      <BottomSheetAction icon={<LinkIcon />} label="Copy link" />
    </BottomSheet>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | ReactNode | required |
| description | ReactNode |  |
| footer | ReactNode |  |
| loading | boolean | false |
| locked | boolean | false |
| trigger | ReactElement |  |
| open | boolean |  |
| onOpenChange | (open) => void |  |
| animated | boolean | true |
| BottomSheetAction icon | ReactNode | required |
| BottomSheetAction label | ReactNode | required |
| BottomSheetAction tone | default, destructive | default |

## When to use

- For short tasks tied to the current screen: share, a quick form, a list of actions.

## When not to use

- For anything longer than one screen or needing navigation: use a page.

## Accessibility

- A native modal dialog with the title as its label.
- Focus moves in and returns to the trigger.
- The grabber is decorative: always offer a visible close or Cancel.

## Motion

- Rises on a 0.15 spring over 400 ms. Web scales from 0.96 and fades.
- Follows the finger, and dismisses past 30% or at 600 px/s.
- The grabber widens to 48 and darkens while pressed.
- With reduced motion, it fades in. Drag still follows.