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>