Button
Primary, secondary, outline, ghost and danger, in three sizes. 40px tall by default with Sen 14/600.
- Color 150ms ease
- Press: 1px down + 98.5% scale
- Disabled 50% opacity
import { Button } from "@/components/ui/button";Components · 8
Actions
Buttons and controls that do something. Presses are quick (150ms) and confirm with a small, specific motion.
Loading button
Shows a spinner in place while an action runs, keeps its width, then confirms.
- Spinner crossfade 200ms
- Ring 700ms linear
- Width stays fixed
<Button loading={isSaving}>Save changes</Button>Icon button
Compact actions. Hover or focus to see the tooltip with the button's name.
- Tap: 92% scale
- Tooltip after 250ms
import { IconButton } from "@/components/ui/icon-button";Like button
On/off action such as saving a listing. The count rolls to its new value.
- Heart pop: bouncy spring
- 6-dot burst 450ms
- Count roll 300ms
import { LikeButton } from "@/components/ui/like-button";Copy button
Copies a value and confirms in place.
ariseui.app/invite/4B-2026- Icon swap: rotate + scale spring
import { CopyButton } from "@/components/ui/copy-button";Speed dial
The main action on mobile screens, expanding into related actions.
- Plus rotates 135°: spring
- Actions stagger 40ms
- Corner radius 16→28
import { SpeedDial } from "@/components/ui/speed-dial";Text link
Inline links draw an underline; call-to-action links nudge their arrow.
Rent is due on the 1st. Read the late fee policy or update your payment method before then.
View all invoices
- Underline draws 300ms ease-out
- Arrow nudges 3px 200ms
import { TextLink } from "@/components/ui/text-link";Theme toggle
Switch this whole site between light and dark. The new theme spreads out from where you click.
- Sun/moon swap 450ms overshoot
- Circle reveal 500ms (View Transitions)
import { ThemeToggle, ThemeSwitcher } from "@/components/ui/theme-toggle";