All components
Button
Trigger actions with solid, surface, outline, ghost, and glass variants across six sizes — polymorphic via asChild (Ark) or render (Base UI).
Variants
solid
subtle
surface
outline
ghost
plain
Sizes
xs
sm
md
lg
xl
Install
zsh — button
1bunx stylexblocks add buttonUsage — Base UI
button.tsx
123456789101112131415161718192021222324import { Button } from "#components/ui/base-ui/button.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( <> {/* variant + size props resolve through the StyleX recipe and are exposed as data-variant / data-size attributes */} <Button variant="solid" size="md" palette={indigoPalette} onClick={save}> Get started </Button>
{/* composition: the render prop replaces the underlying element */} <Button variant="surface" size="md" render={<a href="/docs" />}> Read the docs </Button>
{/* native props merge through mergeProps */} <Button variant="outline" disabled aria-label="Retry sync"> Retry </Button> </> );}