Button
Displays a button or a component that looks like a button
Playground
Installation
pnpm add @tessinaui/uiUsage
import { Button } from "@tessinaui/ui";Examples
Default
A basic button with the default primary variant.
Variants
Four visual styles — primary, secondary, ghost, and outline — alongside the semantic intent colors.
Sizes
Five sizes from xs through xl.
With Icon
Drop a Lucide icon beside the label; spacing is handled automatically.
Icon Only
Use size="icon" for square, icon-only buttons.
Loading
Set loading to show a spinner and disable interaction.
Disabled
The disabled state applies to every variant.
Rounded
Control the corner radius with the rounded prop.
As Child
Use render to apply button styles to another element, such as a link.
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.