ComponentsAction Blocks
Split Button
A compound button with a primary action and a dropdown trigger for secondary options
Playground
Installation
pnpm add @tessinaui/uiUsage
import { SplitButton } from "@tessinaui/ui";<SplitButton label="Create project">
<SplitButton.Item>Blank project</SplitButton.Item>
<SplitButton.Item>Use a template</SplitButton.Item>
</SplitButton>Showcase
All variants, intents, sizes, and states:
API Reference
SplitButton Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Text label for the primary action button |
variant | "primary" | "secondary" | "ghost" | "outline" | "on-color" | "primary" | Visual style variant |
intent | "none" | "error" | "warning" | "success" | "info" | "none" | Semantic color intent |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Size of the button |
rounded | "full" | "lg" | "md" | "sm" | "none" | "full" | Border radius style |
leadingIcon | React.ReactNode | — | Icon rendered before the label |
trailingIcon | React.ReactNode | — | Icon rendered after the label |
onClick | MouseEventHandler | — | Handler for the primary action click |
disabled | boolean | false | Disables both action and dropdown trigger |
loading | boolean | false | Shows a spinner in the action section |
open | boolean | — | Controlled open state of the dropdown |
onOpenChange | (open: boolean) => void | — | Called when dropdown open state changes |
dropdownAlign | "start" | "center" | "end" | "end" | Alignment of the dropdown menu |
children | React.ReactNode | — | Dropdown menu items |
SplitButton.Item Props
Extends @radix-ui/react-dropdown-menu Item props.
| Prop | Type | Description |
|---|---|---|
disabled | boolean | Disables the menu item |
onSelect | (event: Event) => void | Called when item is selected |
SplitButton.Separator
A horizontal line divider between menu items. No additional props.
SplitButton.Label
A non-interactive label for grouping items.
Sizes
| Size | Height | Use case |
|---|---|---|
xs | 32px | Compact toolbars |
sm | 40px | Secondary actions |
md | 48px | Default, most use cases |
lg | 56px | Prominent actions |
xl | 96px | Hero / landing page CTAs |
Accessibility
The Split Button component:
- Two focusable buttons — action button and dropdown trigger — each with their own
Tabstop - Dropdown trigger has
aria-label="More options" - Uses Radix UI's
DropdownMenuprimitive for full keyboard navigation (arrow keys,Enter,Escape) - Focus ring on both buttons (
focus-visible:ring-2) meets WCAG 2.1 AA disabledpropagates to both sections and setspointer-events-nonearia-disabledis set automatically by Radix when the trigger is disabled
Sidebar
A composable, accessible sidebar shell for app layouts. Desktop and mobile modes, three variants (inset, floating, classic), collapsible to icon rail or off-canvas, keyboard shortcut toggle, LTR and RTL. Built on Base UI Collapsible with a full compound-component API.
FAB
A pill-shaped floating action button with optional leading icon, label, and trailing icon