Buttons

Change the props and copy the result.

Reach for the standard Button for almost everything. The rest of the family exists for the jobs it does badly: repeated actions in dense rows, dismissing the surface it sits in, OAuth sign-in, and linking to an app marketplace. Each name links to its variants below.

The workhorse: use it wherever an action needs a visible control, in forms, dialogs, toolbars, and empty states. Pick the color for the action’s weight and consequence, the size for the surface’s density, and add an icon only when it speeds recognition. Every size and color combination follows, read from the kit’s exported style object.

For rows of repeated actions where labels would be noise: table rows, card corners, and editor toolbars. It stays quiet at rest so the content wins, and its tooltip doubles as the accessible name. Not for a screen’s main action, which deserves a labeled Button.

One job: dismissing the surface it sits in. Use it in the top corner of modals, drawers, banners, and toasts. The light theme sits on ordinary surfaces; the dark theme paints hardcoded white for photography and dark panels, which is why the lower band renders it on its own dark surface.

OAuth sign-in on auth screens, and nothing else. Brand follows each provider’s palette and belongs on white. Color keeps the colorful logo on a neutral button, for stacks where competing brand palettes would clash. Gray is monochrome, for interfaces that need the quietest treatment. Each theme shows the labeled form and its icon-only sibling in their own columns.

Marketplace links for landing pages and footers, never in-product actions. They render as anchors with fixed artwork at two heights, 40px and 44px. Use the solid set on light surfaces; the outline set inherits the current text color, so it follows the theme.

Reach for disabled when the action cannot run yet, and loading while it runs; the two are not interchangeable. Every state below is forced onto a real button: hover and focus re-apply the kit’s own state classes with the variant prefix stripped, so what renders is what the kit ships rather than a repainted approximation.