Button

The Button component accepts the following parameters:

type Color =
  | 'primary'
  | 'secondary'
  | 'transparent'
  | 'danger'
  | 'custom';

type Size = 'normal' | 'small' | 'large' | 'custom';
type Style = `normal` | `outline` | `flat`;

interface Props {
  block?: boolean;
  color?: Color;
  size?: Size;
  style?: Style;
  loading?: boolean;
  href?: string;
}

Button Types

<Button color={'primary'}>
  Click Here
</Button>

<Button color={'secondary'}>
  Click Here
</Button>

<Button color={'danger'}>
  Click Here
</Button>

<Button color={'transparent'}>
  Click Here
</Button>

Button Sizes

<div>
  <Button color={'primary'} size={'small'}>
    Small Button
  </Button>
</div>

<div>
  <Button color={'primary'} size={'normal'}>
    Normal Button
  </Button>
</div>

<div>
  <Button color={'primary'} size={'large'}>
    Large Button
  </Button>
</div>

Loading State button

<Button color={'primary'} loading={true}>
  Click Here
</Button>

The Button component with a href attribute will wrap a Next.js Link component and can be used as a normal link styled as a button.

<Button color={'primary'} href={'/docs/components-button'}>
  Go to Page
</Button>

Full Width Button

You can add the block attribute to let the button grow as much as its parent.

<Button block color={'danger'}>
  Are you sure you want to continue?
</Button>