button.mdx

import { Meta, Title, Subtitle, Description, ArgTypes, Canvas, } from "@storybook/blocks"; import { ComponentDetails, TaggedReleases, PropertiesTable, } from "@spectrum-css/preview/blocks";

import * as ButtonStories from "./button.stories";

<Title of={ButtonStories} />

Variants

There are four available variants that are used for different levels of emphasis and different types of actions. By default, a button uses the fill style with a solid background. The primary and secondary variants also have an outline option.

Accent

Primary

Secondary

Negative

Static color

When a button needs to be placed on top of a color background or a visual, use the static color option. Static color buttons do not change shades or values depending upon the color theme.

Static white - primary

Static white - secondary

Static black - primary

Static black - secondary

Sizing

Pending state

Disabled state

Text overflow behavior

Disable text wrapping

Properties

The component accepts the following inputs (properties):

Tagged releases