Skip to content
Paramanu v0.1.0-alpha.0

FAB

A floating action button (FAB) that positions itself at the bottom of the viewport for primary actions.

Basic Usage

import { Fab } from "@paramanu/buttons-react"


export default function App() {
return (
  <Fab aria-label="Add item">
    <PlusIcon />
  </Fab>
)
}
<button class="pm-fab pm-fab--md pm-fab--bottom-right" aria-label="Add item">+</button>

Sizes

import { Fab } from "@paramanu/buttons-react"


export default function App() {
return (
  <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
    <Fab size="sm" aria-label="Small"><PlusIcon /></Fab>
    <Fab size="md" aria-label="Medium"><PlusIcon /></Fab>
    <Fab size="lg" aria-label="Large"><PlusIcon /></Fab>
  </div>
)
}
<div style="display: flex; gap: 16px; align-items: center;">
<button class="pm-fab pm-fab--sm pm-fab--bottom-right" style="position: static;" aria-label="Small">+</button>
<button class="pm-fab pm-fab--md pm-fab--bottom-right" style="position: static;" aria-label="Medium">+</button>
<button class="pm-fab pm-fab--lg pm-fab--bottom-right" style="position: static;" aria-label="Large">+</button>
</div>

Extended

import { Fab } from "@paramanu/buttons-react"


export default function App() {
return (
  <Fab extended aria-label="Add item">
    <PlusIcon /> Add Item
  </Fab>
)
}
<button class="pm-fab pm-fab--md pm-fab--bottom-right pm-fab--extended" aria-label="Add item">+ Add Item</button>