Buttons & Actions

Button

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

Import

import { Button } from "@countryclub/ui-react";

Every button variant at a glance.

The default variant, in all five sizes: xs, sm, md (default), lg and xl.

A bordered button for secondary emphasis.

The ghost variant — borderless and transparent until hovered.

Looks like an inline link with an animated underline.

A quieter link that brightens to full contrast on hover.

Pass an icon before the label — it is sized and spaced automatically.

Pass an icon after the label.

Use the icon sizes (icon-xs to icon-xl) and include an sr-only label for screen readers.

Compose a Spinner with the disabled state to signal an in-flight action.

The disabled state is consistent across every variant.

For primary destructive actions.

For secondary destructive actions.

For tertiary destructive actions.

Use the render prop to render any element as a button.