IconButton

Version - 0.0.7

Displays a button or a component that looks like a button.

Installation

npm install @volta/iconbutton

Usage

import { IconButton as Button } from '@volta/iconbutton';

export default function ButtonDemo() {
  return (
    <Button>
      <Rwe100 />
    </Button>
  );
}

Examples

Sizes

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

import { IconButton as Button } from '@volta/iconbutton';
 
export function ButtonSizes() {
  return (
    <div>
      <Button size="sm">
        <Rwe100 />
      </Button>
      <Button size="md">
        <Rwe100 />
      </Button>
      <Button size="lg">
        <Rwe100 />
      </Button>
      <Button size="xl">
        <Rwe100 />
      </Button>
    </div>
  );
}

Variants

The IconButton component comes with 3 different variants that you can change it using the variant prop.

Rounded

The IconButton component comes with 3 different variants that you can change it using the variant prop.

Colors

The Button component comes with 7 different colors that you can change it using the variant prop.

import { IconButton as Button } from '@volta/iconbutton';
 
export function ButtonVColorariants() {
  return (
    <div>
      <Button color="tertiary" variant="solid">
        <Rwe100 />
      </Button>
      <Button color="brand" variant="outline">
        <Rwe100 />
      </Button>
      <Button color="dense" variant="ghost">
        <Rwe100 />
      </Button>
      <Button color="alert" variant="link">
        <Rwe100 />
      </Button>
    </div>
  );
}

Button Props

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

Attribute	Type	Description	Default
`variant`	Variant	Change button variant	`solid`
`color`	Colors	Change button Colors	`primary`
`size`	Size	Change button size	`md`
`className`	`string`	Add custom className for button	`''`
`children`	`node`	Add content for button	No default value it's a required prop.

Hover Card Iconography