Button

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

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>

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>

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS