Controls / COMPONENT

Button

An animated action button with solid save, share, and delete colors, optional icons, and success feedback.

Live preview

How it works

Save uses emerald, share uses sky, and delete uses rose. A matching hover glow and spring press response keep each action lively. Optional feedback animates the label and icon, then returns to the original state after its duration. Motion is reduced when the user prefers reduced motion.

Accessibility

Uses native button or anchor semantics, an announced polite feedback label, visible keyboard focus, disabled link handling, and reduced-motion-aware transitions.

Limitations

This is a single-action control. Use a separate Toggle or Tabs component when the control represents persistent selection or a group of choices.

Features

Use as a native button or provide href for an anchor link.
Choose primary, secondary, outline, ghost, or soft visual variants.
Choose small, medium, large, or icon sizing.
Pass an optional icon and feedback label/icon for animated action confirmation.
Adds an intent-matched hover glow, focus ring, lift, and press response.
Keeps keyboard focus visible and respects reduced-motion preferences.

Installation

Choose the CLI command or install the component manually.

Package manager

$ npx @istmx/ui add button

Copies the install command for your selected package manager.

Dependencies

ReactMotionTailwind CSSclsxtailwind-merge

Usage

Import the component from the file you copied it to, then use it like any other React component.

Usage

import Button from '@/components/ui/button'
 
<Button onClick={() => console.log('Saved')}>
  Save changes
</Button>
 
<Button
  icon={<BookmarkIcon />}
  feedback={{ label: 'Saved', icon: <CheckIcon /> }}
  onClick={saveItem}
>
  Save
</Button>
 
<Button intent="share" feedback={{ label: 'Link copied' }} onClick={shareLink}>
  Share
</Button>
 
<Button intent="delete" feedback={{ label: 'Deleted' }} onClick={deleteItem}>
  Delete
</Button>
 
<Button href="/stays" variant="outline" size="lg">
  Explore stays
</Button>

Composition

Button
├── Surface and sheen
└── Action content

API reference

childrenReactNode

Button label or content.

href?string

When provided, renders an anchor instead of a button.

variant?ButtonVariant

primary, secondary, outline, ghost, or soft. Defaults to primary.

intent?ButtonIntent

Sets the primary action color: save (emerald), share (sky), or delete (rose). Defaults to save.

size?ButtonSize

sm, md, lg, or icon. Defaults to md.

disabled?boolean

Disables a button or prevents navigation for an anchor.

icon?ReactNode

Optional leading icon shown beside the idle label.

feedback?{ label: string; icon?: ReactNode; duration?: number }

After activation, briefly swaps to a confirmation label and optional icon. Defaults to a check mark and 1800 ms.

className?string

Additional Tailwind classes for the control.

type?"button" | "submit" | "reset"

Native button type; defaults to button.

The listed props match the current component implementation.

Data attributes

Button does not expose custom data attributes.

Examples

Use the primary variant for the main action and opt into feedback when the user needs confirmation that a save, send, or similar action completed. The component accepts native button props and anchor props when href is supplied.

Credits & inspiration

Created by Aryan (istmX) for ISTMX. The source-first, copy-and-own philosophy is inspired by shadcn/ui. About the creator