# Button

Primary trigger for a specific action or form submission. Use "Primary" for the main task, "Secondary" for alternative actions, and "Ghost/Tertiary" for low-priority tasks.

Primary: "Use as the single most important action on a screen. Limit to one per view (e.g., 'Submit', 'Pay Now')."
Secondary: "Use for supporting actions that are not the main goal of the page (e.g., 'Cancel', 'Back')."
Tertiary/Ghost: "Use for low-emphasis actions or repeated items in a list (e.g., 'View Details', 'Learn More')."
Critical: "Use specifically for actions that result in data loss or permanent changes. Usually styled in Red."

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.button.code"
  source="components/dist/registries/dskit.json#button"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"button"} activeTab={"code"} />

## Tokens

Per-component token documentation pending. See the <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}foundations/color`}>foundations tokens</a> for the full scale.

## API surface

Variant axes are listed under Variants above. Public properties are defined in the registry at `components/dist/registries/dskit.json#Button`.