Button

Interactive button component with multiple variants, sizes, and states. Built with Radix UI primitives for accessibility.

Installation
# Install @opencosmos/ui to use Button
pnpm add @opencosmos/ui
Preview
Hover to see effects
Loading preview...
Customize
— Visual style variant - default for primary actions, destructive for dangerous actions, outline for secondary emphasis, secondary for alternative actions, ghost for subtle actions, link for text-style links
— Size variant - sm (h-8) for compact spaces, default (h-9) for standard use, lg (h-10) for prominent actions, icon (h-9 w-9) for icon-only buttons
— Disable button interaction and show disabled state
Usage
Import
import { Button } from '@opencosmos/ui';
Example
<Button>
  Click me
</Button>
Eject
Copy this component into your project for full customization

API Reference

PropTypeDefaultDescription
variantdefault | destructive | outline | secondary | ghost | link"default"Visual style variant - default for primary actions, destructive for dangerous actions, outline for secondary emphasis, secondary for alternative actions, ghost for subtle actions, link for text-style links
sizesm | default | lg | icon"default"Size variant - sm (h-8) for compact spaces, default (h-9) for standard use, lg (h-10) for prominent actions, icon (h-9 w-9) for icon-only buttons
disabledbooleanfalseDisable button interaction and show disabled state

Accessibility

  • Uses semantic <button> element for proper keyboard and screen reader support
  • focus-visible outline ensures visible focus ring only for keyboard navigation
  • Loading spinner has aria-hidden="true" to prevent screen reader announcement
  • disabled state properly conveyed to assistive technologies
  • Extends native HTMLButtonElement, inheriting all standard ARIA attributes
  • Supports focus management via React 19 ref-as-prop pattern

Examples

Default
Destructive
Outline
Secondary
Ghost
Link
Small
Large
Disabled

Code Examples

Basic Usage

Simple button with click handler

import { Button } from '@opencosmos/ui';

<Button variant="default" onClick={() => console.log('Clicked!')}>
  Click Me
</Button>

All Variants

Showcase of all button variants

import { Button } from '@opencosmos/ui';

<div className="flex gap-3">
  <Button variant="default">Default</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="link">Link</Button>
</div>

Sizes

All available button sizes

import { Button } from '@opencosmos/ui';

<div className="flex items-center gap-3">
  <Button size="sm">Small</Button>
  <Button size="default">Default</Button>
  <Button size="lg">Large</Button>
</div>