Floating Action Button

Version - 0.0.6

A Floating Action Button (FAB) is a UI component that is typically used for a primary action in an application. It's called "floating" because it appears to float above the interface, and it's usually placed in a prominent place on the screen.

Installation

npm install @volta/fab

Usage

import { Fab } from '@volta/fab';
import { Rwe13 } from '@volta/iconography';

<Fab icon={<Rwe13 />} label="Action" />

Examples

Sizes

The Fab component comes with 3 different sizes that you can change it using the size prop.

import { Switch } from '@volta/switch';
import { Rwe13 } from '@volta/iconography';
 
export function SwitchSizes() {
  return (
    <div>
      <Fab size="sm" icon={<Rwe13 />} label="small" />
      <Fab size="md" icon={<Rwe13 />} label="medium" />
      <Fab size="lg" icon={<Rwe13 />} label="large" />
    </div>
  );
}

The labelprop is optional.

import { Switch } from '@volta/switch';
import { Rwe13 } from '@volta/iconography';
 
export function SwitchSizes() {
  return (
    <div>
      <Fab size="sm" icon={<Rwe13 />} />
      <Fab size="md" icon={<Rwe13 />} />
      <Fab size="lg" icon={<Rwe13 />} />
    </div>
  );
}

Fab Props

The following props are available for fab component. These are the custom props that we've added for the fab component and you can use all the other native props as well.

Attribute	Type	Description	Default
`size`	Size	Change fab size	`md`
`className`	`string`	Add custom className for fab	`''`
`icon`	`node`	Add an icon for fab	No default value it's a required prop.
`label`	`string`	Add text-content for fab	`''`

Dropdown Menu Form