Button

Interactive button with primary, secondary, ghost, and destructive variants. Supports three sizes.

Examples

Default

The primary button style. Used for main actions.

Variants

Four visual variants for different action types.

Sizes

Three sizes for different contexts.

Disabled

Disabled buttons cannot be interacted with.

Full Width

Button spanning the full container width.

Button Group

Buttons composed as a group with consistent spacing.

With Icon

Buttons with leading or trailing icon characters.

Loading

Button with a loading spinner indicator.

Outline

Button with outline style: border visible, transparent background.

Link Style

Button styled as a text link.

RTL

Button rendered in right-to-left context.

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { Button } from "@rokle/components";

import { Button } from "@rokle/components";

export function Example() {
  return (
    <div className="flex gap-3">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
    </div>
  );
}

Source

The implementation source for this component. Copy it into your project and customise.

API Reference

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "ghost" \| "destructive"	"primary"	Visual style variant.
size	"sm" \| "md" \| "lg"	"md"	Button size.
disabled	boolean	false	Disable interaction.
children	ReactNode	-	Button content.

Previous← AngleSlider NextCheckbox →