Button

The Button component is a simple styled wrapper around the native HTML button element.

Basic Usage

By default - the Button component will render a primary button with a solid background color. This is the same as setting the variant prop to primary.

import { Button } from '~/core/ui/Button';
 
<Button>
  Click Me
</Button>

Button Variants

The Button component has a number of variants that can be used to change the appearance of the button.

Secondary

Use the secondary variant to render a button with a secondary background color.

import { Button } from '~/core/ui/Button';
 
<Button variant="secondary">
  Click Me
</Button>

Ghost

Use the ghost variant to render a button with a transparent background and a border.

import { Button } from '~/core/ui/Button';
 
<Button variant="ghost">
  Click Me
</Button>

Outline

Use the outline variant to render a button with a transparent background and a border.

import { Button } from '~/core/ui/Button';
 
<Button variant="outline">
  Click Me
</Button>

Outline Primary

Use the outlinePrimary variant to render a button with a transparent background and a border with the primary color.

import { Button } from '~/core/ui/Button';
 
<Button variant="outlinePrimary">
  Click Me
</Button>

Link

Use the link variant to render a button that looks like a link.

import { Button } from '~/core/ui/Button';
 
<Button variant="link">
  Click Me
</Button>

Destructive

Use the destructive variant to render a button with a destructive color.

import { Button } from '~/core/ui/Button';
 
<Button variant="destructive">
  Click Me
</Button>