Fab

Stable

Floating action button for high-priority actions.

Installation

npm install @xaui/native

Import

import { Fab } from '@xaui/native/fab'

Basic Usage

Minimal example showing the component with its default configuration.

import { Fab } from '@xaui/native/fab'

export function Example() {
  return <Fab />
}

Variants

Use case with multiple visual variants.

import { Fab } from '@xaui/native/fab'

export function VariantsExample() {
  return (
    <>
      <Fab variant="solid" />
      <Fab variant="outlined" />
      <Fab variant="light" />
      <Fab variant="flat" />
      <Fab variant="faded" />
    </>
  )
}

Disabled State

Use case where the component should be non-interactive.

import { Fab } from '@xaui/native/fab'

export function DisabledExample() {
  return <Fab isDisabled />
}