Button.
A little push. A clear next step.
A button turns intent into action. Choose the right emphasis, give it a clear label, and let the details do their work.
Make it yours
Preparing the example…
A place to start
UsageImport the stylesheet once at your application root. This complete example reflects the properties selected above.
Loading example…
A spectrum of emphasis
Examples & statesUse one solid action to lead. Let the quieter variants support it.
The finer details
API referenceGenerated from Dixy’s local TypeScript interfaces. Native and Base UI Button props are forwarded; this table covers the options Dixy adds.
Button
| Prop | Type / description | Default |
|---|---|---|
material | "matte" | "glossy" | "soft" | "metal" | "paper"Optional finish for solid/soft variants; requires materials.css. Inherits Theme. | — |
shape | "rounded" | "pill" | "square"Geometry independent of emphasis. Inherits Theme; focus remains outside. | — |
size | "sm" | "md" | "lg"The height and horizontal padding. | md |
variant | "soft" | "solid" | "outline" | "ghost"The visual emphasis. | solid |
color | "neutral" | "accent" | "danger" | "success"The semantic color palette. | accent |
loading | booleanShow progress and prevent repeated activation. | false |
IconButton
| Prop | Type / description | Default |
|---|---|---|
aria-label* | stringRequired accessible name for the icon-only action. | — |
Built from the same foundations
Styling tokensChange Theme settings above to compare appearance, accent, neutral, radius, spacing density, motion and direction. Override component aliases on a Theme root so custom properties follow portaled content too. The wrapper merges className, style, refs and render composition with its owning primitive.
| Token | Purpose |
|---|---|
--dixy-button-primary-background | The component-specific starting point. |
--dixy-font-label-md | Control label font and line height; body roles remain readable in text inputs. |
--dixy-color-background-selected | Selected surfaces use semantic color across appearances. |
--dixy-color-border-focus | Focus indication remains visible independently of shadows. |
--dixy-spacing-inset-sm | Density-aware component padding. |
--dixy-motion-transition-feedback | Short state feedback, reduced by the inherited motion setting. |
Consider everyone
AccessibilityUse a verb that explains the action. IconButton requires an aria-label. Loading communicates aria-busy and disables activation; keep a visible label. For navigation, use render with an anchor, nativeButton={false}, and role="link" so its semantics match its purpose.
Target: WCAG 2.2 AA. Automated tests cover selected behavior; manual screen-reader, contrast, and zoom validation remain part of the release checklist.
Build it. Then understand it.
The wrapper adds a visual API while forwarding Base UI props and refs. Loading changes behavior as well as appearance: it must prevent duplicate actions.
--dixy-button-primary-background