Skip to Content
ComponentsButton

Button

Buttons trigger actions and events. Rayden UI provides a flexible Button component with multiple variants, appearances, and sizes.

Import

import { Button } from "@raydenui/ui";
import type { ButtonProps, ButtonVariant, ButtonAppearance, ButtonSize } from "@raydenui/ui";

Usage

Basic

<Button>Click me</Button>

Variants

The variant prop controls the button’s color scheme:

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="grey">Grey</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="text">Text</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="info">Info</Button>

Appearances

The appearance prop controls whether the button is solid or outlined:

<Button appearance="solid">Solid</Button>
<Button appearance="outlined">Outlined</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

With Icons

import { Icon } from "@raydenui/ui";
 
// Leading icon
<Button icon={<Icon name="plus" />} iconPosition="leading">
  Add Item
</Button>
 
// Trailing icon
<Button icon={<Icon name="arrow-right" />} iconPosition="trailing">
  Continue
</Button>
 
// Icon only
<Button icon={<Icon name="plus" />} iconPosition="icon-only" aria-label="Add" />

States

<Button disabled>Disabled</Button>

Props

PropTypeDefaultDescription
variant"primary" | "secondary" | "grey" | "destructive" | "text" | "success" | "warning" | "info""primary"Color variant
appearance"solid" | "outlined""solid"Visual style
size"sm" | "lg""sm"Button size
iconReactNode—Icon element
iconPosition"none" | "leading" | "trailing" | "icon-only""none"Icon placement
disabledbooleanfalseDisables the button
classNamestring—Additional CSS classes

The component also accepts all native <button> HTML attributes.

Accessibility

  • Uses semantic <button> element
  • Includes disabled attribute support
  • Focus visible styles for keyboard navigation
  • When using iconPosition="icon-only", provide an aria-label

Design Guidelines

When to use

  • Primary: Main call-to-action, one per screen section
  • Secondary: Alternative actions alongside primary
  • Grey: Neutral actions, less emphasis
  • Destructive: Delete, remove, or dangerous actions
  • Text: Inline or tertiary actions
  • Success/Warning/Info: Contextual feedback actions

Sizing

  • Small (sm): Default, for most use cases
  • Large (lg): Hero sections, prominent CTAs
Last updated on
BreadcrumbButtonGroup