Fab

A floating action button for the primary action on a page. Icon-only, or extended with a visible label.

Example

<Fab href="/components" label="Create note">
  <svg ...>...</svg>
</Fab>
<Fab label="New message" extended placement="bottom-start">
  <svg ...>...</svg>
</Fab>

Props

Prop	Type	Default	Description
`label`	`string`	-	Accessible name; visible text when `extended`.
`href`	`string`	-	Renders a link; otherwise a button.
`extended`	`boolean`	`false`	Shows the label as visible text.
`placement`	`bottom-end \| bottom-start \| top-end \| top-start`	`bottom-end`	Fixed viewport corner.
`size`	`md \| lg`	`md`	Button size.

Accessibility

label is required and always exposed as aria-label.
Fixed position is announced once; use one FAB per page.