Components

Button variants

Twenty opinionated button patterns on top of Button—elevation, glass, pills, loading and async states, toggles, steppers, badges, split rows, and motion (pulse / spring).

SourceRegistry

Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.

Loading...

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

1

Install the component

Run the registry command below to add button-variants to your project.

watermelon add button-variants
2

Install manual dependencies

If you are wiring the component manually, install the package dependencies shown below.

npm install button
3

Import the component

Import Button variants from your local UI registry output.

Import

import { ButtonVariants } from "@/components/ui/button-variants";

Import

Import

import {
ButtonVariantsShowcase,
ButtonVariantElevated,
ButtonVariantLoading,
BUTTON_VARIANT_ROWS,
} from "@/components/ui/button-variants";

Usage

Use ButtonVariantsShowcase for a labeled grid of all 20, or import individual ButtonVariant* modules from components/ui/button-variants/ (one component file per preset, plus index.tsx, types.ts, and in the registry package shared-styles.ts). Each wraps the base Button with layout, motion, or local state. The base Button also supports shape="pill" and fullWidth where needed.

Loading...

Presets

proptypedefaultdescription
ButtonVariantElevated … DownloadTrailingcomponents—See source file for the full list of 20 named exports.
ButtonVariantsShowcase() => JSX—Scrollable grid with labels.
BUTTON_VARIANT_ROWS{ id, label, render }[]—Metadata for building custom layouts.
PreviousBreadcrumb
NextButton