Button

Trigger actions or navigation with text, icons, loading, and disabled states, from primary actions to compact tools.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Button to trigger an action. Use bare for an icon action without a button shell. For a padded icon-only button, set iconOnly and provide an aria-label. Use emphasis="muted" for opacity feedback on a bare button. Use Tab to switch content, and Segmented to choose between mutually exclusive values.

Without a context, the defaults are gray and sm. Explicit variant and size values take priority over group settings.
An icon-only button needs an accessible name. bare removes the shell; iconOnly keeps it. The component does not infer either mode from its children.

Import

import { Button } from '@snowui-design-system/components';

Usage

Gray variant

Filled variant

Outline variant

Borderless variant

Icon Only

Bare

Emphasis

Toggle

API Reference

Property	Type	Default	Example	Description
`variant`	`"gray" \| "filled" \| "outline" \| "borderless"`	`—`	`variant="gray"`	Button appearance. An explicit value takes priority, followed by ButtonGroup or Breadcrumb context; without context, it falls back to gray.
`size`	`"sm" \| "md" \| "lg"`	`—`	`size="sm"`	Controls text size, padding, corner radius, and child icon size. An explicit value takes priority, followed by ButtonGroup or parent size context; without context, it defaults to sm.
`iconOnly`	`boolean`	`false`	`iconOnly`	Padded icon-only mode with symmetric padding and icon sizing. Icons are 16/20/24px at sm/md/lg. For an icon action without a shell, use bare. Development mode warns when aria-label, aria-labelledby, and title are all missing.
`bare`	`boolean`	`false`	`bare`	Button without a shell, mainly for icon actions but also supports text or other content. Ignores variant and removes padding, radius, background, border, and hover overlay while keeping the content gap. Do not combine it with iconOnly. Icons are 16/20/24px at sm/md/lg unless a child icon specifies its own size. Normally fully opaque; emphasis="muted" changes opacity from 40% to 100% on hover.
`emphasis`	`"normal" \| "muted"`	`"normal"`	`emphasis="normal"`	Visual emphasis for bare buttons. normal stays fully opaque at rest and on hover; muted changes from 40% at rest to 100% on hover. It does not alter the appearance of a non-bare variant.
`backgroundBlur`	`boolean`	`false`	`backgroundBlur`	Blur content behind the button with the same backdrop-filter: blur(1.25rem) used by the BarChart blurred overlay.
`gap`	`number`	`—`	`gap={42}`	Content gap token index. Defaults to the size preset when omitted. Single-line graphics and independent text content retain at least 4 CSS px, including an explicit zero; larger preferred gaps are preserved. No outer Frame is required.
`scaleOnHover`	`boolean`	`—`	`scaleOnHover`	Enable the built-in background scale on hover and the related press/release animation. Enabled by default for standalone actions; content scales with the background while hit area and layout stay fixed. A composite container can default this to false, and a child Button can explicitly re-enable it. bare has no background layer, so this has no visual effect. This Prop does not override explicit whileHover behavior.
`contentScaleOnHover`	`boolean`	`—`	`contentScaleOnHover`	Scale text, Icon, Spinner, and other content as one unit with the built-in hover and press animation. false disables content scaling only. true still requires background scaling to be active and cannot bypass scaleOnHover=false, bare, disabled, or explicit whileHover behavior.
`toggle`	`boolean`	`false`	`toggle`	Shorthand for Toggle mode. Internally sets Click={{ Idle: "Active", Active: "Idle" }} and whileClick=false. In Active state, Frame exposes data-state="Active" for Brand colors on gray, outline, and borderless (not filled), and outputs aria-pressed. Explicit Click or whileClick values still take priority.
`holdRepeat`	`boolean`	`false`	`holdRepeat`	Repeat while the pointer is held down on an enabled button host. Dispatches one click immediately, then periodic clicks after a delay, and stops on release or cancellation. Links and keyboard activation do not repeat.
`holdRepeatDelay`	`number`	`260`	`holdRepeatDelay={42}`	Delay in milliseconds before periodic repetition starts. Negative values are treated as zero. Applies only when holdRepeat=true; the first periodic click also waits for holdRepeatInterval.
`holdRepeatInterval`	`number`	`80`	`holdRepeatInterval={42}`	Interval in milliseconds between periodic clicks while held. The minimum is 1 ms. Applies only when holdRepeat=true.
`children`	`Snippet`	`—`	`<Button>Content</Button>`	Text, icons, or other button content. Set iconOnly for a padded icon-only button or bare for an unframed one. Both icon-only patterns need an accessible name; the component does not infer one from its content.