# Fab

> Atom — orn-ui

> ⚠️ Requires <UIProvider>: This component (like every orn-ui component) must render inside a <UIProvider> ancestor, or it throws at runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Runs on Expo SDK 54, 55, 56 and 57, and on bare React Native >=0.81 with react >=19.1. No native modules — works in Expo Go, no prebuild.

## Installation

Install just this component (copies the source into your project, no npm dependency)
```bash
npx orn-ui add fab
```

Or install the whole package and import it
```tsx
pnpm add orn-ui
import { Fab } from 'orn-ui/fab';
```

Depends on: core (theme + icons), pressable-scale

## Variants

### Default

```tsx
<View style={{ height: 90 }}>
  <Fab onPress={() => {}} accessibilityLabel="Create invoice" bottom={0} right={0} />
</View>
```

### Custom

```tsx
<View style={{ height: 90 }}>
  <Fab onPress={() => {}} accessibilityLabel="Search" iconName="search" color="#00cae1" size={48} bottom={0} right={0} />
</View>
```

## Full demo source

```tsx
const variants: VariantDef[] = [
  {
    label: 'Default',
    content: (
      <View style={{ height: 90 }}>
        <Fab onPress={() => {}} accessibilityLabel="Create invoice" bottom={0} right={0} />
      </View>
    ),
  },
  {
    label: 'Custom',
    content: (
      <View style={{ height: 90 }}>
        <Fab onPress={() => {}} accessibilityLabel="Search" iconName="search" color="#00cae1" size={48} bottom={0} right={0} />
      </View>
    ),
  },
];
return <VariantList variants={variants} />;
```

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `onPress` | `(e: GestureResponderEvent) => void` | — | — |
| `iconName?` | `IconName` | plus | — |
| `icon?` | `ReactNode` | — | — |
| `size?` | `number` | 60 | — |
| `bottom?` | `number` | 20 | — |
| `right?` | `number` | 20 | — |
| `color?` | `string` | — | — |
| `style?` | `StyleProp<ViewStyle>` | — | — |
| `accessibilityLabel` | `string` | — | — |