Styling and Theme

CSS Mode

FabButton supports two CSS modes:

• manual (default): uses built-in FabButton styling
• library: maps styles to your UI library classes

Create app-level config once:

import { configureFabButton, createFabButtonConfig } from "@rezafab/fab-button-react"
 
configureFabButton(
  createFabButtonConfig({
    cssMode: "manual"
  })
)

Import it once in app entry:

import "./fab-button.config"

Tailwind Preset

import { configureFabButton, createFabButtonConfig } from "@rezafab/fab-button-react"
 
configureFabButton(
  createFabButtonConfig({
    cssMode: "library",
    library: {
      preset: "tailwind"
    }
  })
)

Bootstrap Preset

import { configureFabButton, createFabButtonConfig } from "@rezafab/fab-button-react"
 
configureFabButton(
  createFabButtonConfig({
    cssMode: "library",
    library: {
      preset: "bootstrap"
    }
  })
)

Custom Class Preset

import { configureFabButton, createFabButtonConfig } from "@rezafab/fab-button-react"
 
configureFabButton(
  createFabButtonConfig({
    cssMode: "library",
    library: {
      preset: "custom",
      classes: {
        root: "rk-btn",
        section: "rk-btn__section",
        actionSection: "rk-btn__section--interactive",
        variant: {
          primary: "rk-btn--primary",
          outline: "rk-btn--outline"
        },
        size: {
          sm: "rk-btn--sm",
          md: "rk-btn--md",
          lg: "rk-btn--lg"
        }
      }
    }
  })
)

Native Theme Support

• light
• dark
• system (follows prefers-color-scheme)

<FabButton
  theme="dark"
  sections={[
    { key: "left", content: "Dark" },
    { key: "right", content: "Theme" }
  ]}
/>

Global theme config:

import { configureFabButton } from "@rezafab/fab-button-react"
 
configureFabButton({
  theme: "system"
})

CSS Variable Override

.custom-action {
  --fab-button-bg: #fff7ed;
  --fab-button-color: #7c2d12;
  --fab-button-border: 1px solid #fdba74;
  --fab-button-radius: 999px;
  --fab-button-gap: 8px;
}

Theme Tokens Package

pnpm add @rezafab/fab-button-theme-tokens

import "@rezafab/fab-button-theme-tokens/tokens.css"
import { fabButtonThemeTokens } from "@rezafab/fab-button-theme-tokens"

tokens.css exposes CSS variables consumed by default FabButton styles.