Fab

A floating action button: the one main action of a page, circular - its icon - or extended, a pill with a label.

A floating action button: the one main action of a page, circular - its icon - or extended, a pill with a label. It is a Button, with its focus ring, press state and disabled behavior, raised on a theme shadow. Where it floats is the page's: no position is built in.

import { Fab } from '@soroush.tech/design-system/Fab'

;<Fab aria-label="Add" onClick={add}>
  <Icon name="add" color="inherit" />
</Fab>
;<Fab variant="extended" startIcon={<Icon name="add" color="inherit" />}>
  Create
</Fab>

Examples

Default

const args: Partial<FabProps> = { 'aria-label': 'Add' }

<Fab {...args}>{add}</Fab>

Extended

const args: Partial<FabProps> = { variant: 'extended' }

<Fab {...args} startIcon={add}>
  Create
</Fab>

Collapsing

const args: Partial<FabProps> = { variant: 'extended' }

<CollapsingDemo {...args} />

Sizes

const args: Partial<FabProps> = { 'aria-label': 'Add' }

<Flex flexDirection="row" gap={2} alignItems="center">
  {textInputSizeTokens.map((size) => (
    <Fab key={size} {...args} size={size} aria-label={`Add, ${size}`}>
      {add}
    </Fab>
  ))}
</Flex>

Colors

const args: Partial<FabProps> = { 'aria-label': 'Add' }

<Flex flexDirection="row" gap={2} alignItems="center">
  {buttonColorTokens.map((color) => (
    <Fab key={color} {...args} color={color} aria-label={`Add, ${color}`}>
      {add}
    </Fab>
  ))}
</Flex>

With AMenu

const args: Partial<FabProps> = { 'aria-label': 'Add' }

<Flex
  flexDirection="row"
  justifyContent="flex-end"
  alignItems="flex-start"
  width="20rem"
  minHeight="16rem"
>
  <Menu
    align="end"
    aria-label="Create"
    trigger={
      <Fab {...args} aria-label="Create">
        {add}
      </Fab>
    }
  >
    <MenuItem value="document">New document</MenuItem>
    <MenuItem value="folder">New folder</MenuItem>
    <MenuItem value="upload">Upload a file</MenuItem>
  </Menu>
</Flex>

Extended With AMenu

const args: Partial<FabProps> = { 'aria-label': 'Add' }

<Flex
  flexDirection="row"
  justifyContent="flex-end"
  alignItems="flex-start"
  width="20rem"
  minHeight="16rem"
>
  <Menu
    align="end"
    trigger={
      <Fab {...args} aria-label={undefined} variant="extended" startIcon={add}>
        Create
      </Fab>
    }
  >
    <MenuItem value="document">New document</MenuItem>
    <MenuItem value="folder">New folder</MenuItem>
    <MenuItem value="upload">Upload a file</MenuItem>
  </Menu>
</Flex>

Extended Long Label

const args: Partial<FabProps> = { 'aria-label': 'Add' }

<View width="12rem">
  <Fab {...args} variant="extended" startIcon={<Icon name="add" color="inherit" />}>
    A label that is far too long for its container
  </Fab>
</View>

Spacing

const args: Partial<FabProps> = { 'aria-label': 'Add' }

<Fab {...args} variant="extended" m={3} px={5} startIcon={<Icon name="add" color="inherit" />}>
  Create
</Fab>

Disabled

const args: Partial<FabProps> = { disabled: true, 'aria-label': 'Add' }

<Fab {...args}>{add}</Fab>