Playground
Button
Tweak the variant, size, and props live — this is the real Button component.
Unlike the component catalog's static preview, this is editable: change
the code below and the render updates immediately. It runs against the real Button import, not a
copy — nothing here is fetched from a package registry, so ui-kit stays exactly as private as it
is everywhere else. See
the design note
for why that distinction matters.
<div className="flex flex-wrap items-center gap-3"> <Button variant="primary">Primary</Button> <Button variant="secondary" size="lg">Secondary</Button> <Button variant="ghost" uppercase>Ghost</Button> </div>
Try changing variant to inverse or destructive, or add fullWidth — see the
Button catalog page for the full prop reference.