Button
Displays a button or a component that looks like a button
Installation
pnpm add @tessinaui/uiUsage
import { Button } from "@tessinaui/ui";Playground
Configure every property of the Button component interactively:
Preview
Loading...
Showcase
All variant and intent combinations at every size, with disabled and loading states:
Preview
Loading...
API Reference
Props
The Button component extends native HTML button attributes and includes:
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "ghost" | "outline" | "primary" | The visual style variant |
intent | "none" | "error" | "warning" | "success" | "info" | "none" | The semantic intent color |
size | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "md" | The size of the button |
rounded | "full" | "lg" | "md" | "sm" | "none" | "full" | The border radius style |
loading | boolean | false | Shows a loading spinner and disables the button |
asChild | boolean | false | Render as a child element using Radix UI Slot |
All standard HTML button attributes are also supported (onClick, disabled, type, etc.).
Variants
Variant Options
- primary: Filled button for main actions
- secondary: Gray button for alternative actions
- ghost: Transparent button with no background
- outline: Button with border, fills on hover and pressed states
Intent Options
Intent controls the semantic color of the button, independent of the variant style:
- none: Default color scheme (purple for primary, gray for secondary)
- error: Red color scheme for destructive or error actions
- warning: Yellow color scheme with dark text for warning actions
- success: Green color scheme for success or confirmation actions
- info: Blue color scheme for informational actions
Size Options
- xs: Extra small (32px height, 14px text)
- sm: Small (40px height, 14px text)
- md: Medium (48px height, 14px text) - default
- lg: Large (56px height, 16px text)
- xl: Extra large (96px height, 24px text)
- icon: Square button for icons (48x48px)
Rounded Options
- full: Fully rounded corners (pill shape) - default
- lg: Large rounded corners
- md: Medium rounded corners
- sm: Small rounded corners
- none: No rounded corners (sharp edges)
Accessibility
The Button component:
- Uses semantic
<button>element - Supports keyboard navigation (Enter and Space)
- Includes proper focus states with visible ring
- Handles disabled state with distinct visual treatment
- Works with screen readers
Composition
The asChild prop allows you to use Button styles on other elements:
import { Button } from "@tessinaui/ui";
import Link from "next/link";
<Button asChild>
<Link href="/dashboard">Dashboard</Link>
</Button>This renders a Next.js Link with Button styling while maintaining Link functionality.