COMPONENT PLAYGROUND

Try the details.

Explore controls, overlays, dates and tables. Configure their states, try the keyboard flows and share a link to the details.

THE DETAILS

ComponentState

Button text

VariantSizeTrailing icon

Narrow previewDark preview

Links preserve component options, states, sample dates and selected disciplines. Use the preview to explore its keyboard behaviour.

LIVE / BUTTONFull width

Your configuration.

REACT / TYPESCRIPT

'use client';
import { useState } from "react";
import { Button } from "@/components/ui/bld8/button";

export default function Example() {
  const [message, setMessage] = useState("");
  return (
    <><Button variant="primary" size="md" onClick={() => setMessage("Button activated.")}>Save changes</Button><p role="status">{message}</p></>
  );
}

A client component with local sample state. Connect persistence and retry actions to your own service.

npx shadcn@latest add https://ui.bld8.dev/r/button.json