Components

Fab

A circular button used for primary actions in an interface.

Logo

Variants

The Fab supports different visual styles, Each variant provides a distinct appearance to match your design needs. Use the variant prop to customize the style.

Sizes

Available in multiple sizes ensuring flexibility for various UI layouts. Use the size prop to adjust the component size.

Colors

Choose from a range of colors to seamlessly blend with your design aesthetics. Use the color prop to change the component color.

API Reference

type

Type:

"fixed" | "relative" | "absolute" | "sticky" | "static"

Defines the CSS position property of the Floating Action Button (Fab).

Default:

fixed
size

Type:

"sm" | "md" | "lg" | "xl" | "2xl"

Specifies the size of the Fab, ranging from small (sm) to extra-large (2xl).

Default:

sm
variant

Type:

"solid" | "soft" | "outline"

Determines the visual style of the Fab: solid, soft, or outlined.

Default:

solid
position

Type:

"left" | "right"

Sets the horizontal position of the Fab on the screen (left or right).

Default:

right
color

Type:

"blue" | "red" | "yellow" | "green" | "neutral" | "thick" | "teal" | "gray"

Defines the color theme of the Fab.

Default:

blue
mode

Type:

"dark" | "light"

Determines whether the Fab is displayed in dark or light mode.

Default:

System