Button

Version - 0.0.13

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

Installation

npm install @volta/button

Usage

import { Button } from '@volta/button';

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

Examples

Sizes

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

import { Button } from '@volta/button';
 
export function ButtonSizes() {
  return (
    <div>
      <Button size="sm">small</Button>
      <Button size="md">medium</Button>
      <Button size="lg">large</Button>
      <Button size="xl">x-large</Button>
    </div>
  );
}

Variants

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

Colors

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

import { Button } from '@volta/button';
 
export function ButtonColorVariants() {
  return (
    <div>
      <Button color="primary">primary</Button>
      <Button color="brand">brand</Button>
      <Button color="secondary">primary</Button>
      <Button color="tertiary">tertiary</Button>
      <Button color="dense">dense</Button>
      <Button color="success">success</Button>
      <Button color="warning">warning</Button>
      <Button color="alert">alert</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.

Breadcrumb Calendar