FloatingActionButton

FAB promotes the primary action in an interface. Use for the most important action on a screen.

Preview

Basic Usage

<FloatingActionButton
  icon={<PlusIcon />}
  onPress={handleAdd}
  accessibilityLabel="Add new reading"
/>

Sizes

<FloatingActionButton size="sm" icon={<PlusIcon />} onPress={handleAdd} accessibilityLabel="Add" />
<FloatingActionButton size="md" icon={<PlusIcon />} onPress={handleAdd} accessibilityLabel="Add" />
<FloatingActionButton size="lg" icon={<PlusIcon />} onPress={handleAdd} accessibilityLabel="Add" />

Variants

primary

secondary

surface

<FloatingActionButton variant="primary" icon={<PlusIcon />} onPress={handleAdd} accessibilityLabel="Add" />
<FloatingActionButton variant="secondary" icon={<PlusIcon />} onPress={handleAdd} accessibilityLabel="Add" />
<FloatingActionButton variant="surface" icon={<PlusIcon />} onPress={handleAdd} accessibilityLabel="Add" />

Extended FAB

FAB with a label for more context.

+New Reading

<FloatingActionButton
  icon={<PlusIcon />}
  label="New Reading"
  onPress={handleAdd}
  accessibilityLabel="Add new reading"
/>

Speed Dial

FAB that expands to reveal additional actions.

Save Reading

💾

🔗

New Cast

✨

<SpeedDial
  icon={<PlusIcon />}
  actions={[
    { icon: <SaveIcon />, label: 'Save Reading', onPress: handleSave },
    { icon: <ShareIcon />, label: 'Share', onPress: handleShare },
    { icon: <CastIcon />, label: 'New Cast', onPress: handleCast },
  ]}
  accessibilityLabel="Actions menu"
/>

API Reference

FloatingActionButton Props

Prop	Type	Default	Description
`icon`	`ReactNode`	Required	Icon to display
`label`	`string`	-	Label for extended FAB
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Button size
`variant`	`'primary' \| 'secondary' \| 'surface'`	`'primary'`	Button variant
`position`	`'bottom-right' \| 'bottom-left' \| 'bottom-center'`	`'bottom-right'`	Screen position
`onPress`	`() => void`	Required	Press handler
`disabled`	`boolean`	`false`	Disabled state
`style`	`ViewStyle`	-	Custom styles
`accessibilityLabel`	`string`	Required	Screen reader label

SpeedDial Props

Prop	Type	Default	Description
`icon`	`ReactNode`	Required	Main FAB icon when closed
`openIcon`	`ReactNode`	-	Icon when open
`actions`	`SpeedDialAction[]`	Required	Speed dial actions
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Open state handler
`position`	`FABPosition`	`'bottom-right'`	FAB position
`accessibilityLabel`	`string`	Required	Screen reader label