Button

Shadcn compatible React button on Base UI with eight variants, nine sizes including icon sizes, a pressed state and render prop support for links.

src/registry/ui/button.tsx/r/button.json

Default

Outline

Destructive

Sizes

Installation#

bash

npx shadcn@latest add @minidev/button

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/button.json

Usage#

tsx

import { Button } from "@/components/ui/button"

export function Example() {
  return (
    <Button className="w-full">Continue</Button>
  )
}

API reference#

Button props
Prop	Type	Default
`variant`	`"default" \| "accent" \| "outline" \| "secondary" \| "ghost" \| "soft" \| "destructive" \| "link"`	`"default"`
`size`	`"xs" \| "sm" \| "default" \| "lg" \| "xl" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`

Also accepts every prop of ButtonPrimitive props, passed through to the root element.

Dependencies#

npm

@base-ui/reactclass-variance-authority

Built from

No other MiniDev files

Examples#

AuthSign-in & onboarding ButtonVariants & sizes Button groupSegmented actions Data extraHeatmap, timeline, more Data tableSort, filter, bulk DropdownMenus & actions New in 0.2Interactive chart, toasts, agent runs, inbox OverlaysDialog, sheet, popover SettingsAccount & API ShellsApp chrome

Button GroupGroups adjacent buttons into one segmented control in Tailwind, joining borders and rounding only the outer corners. Uses role group for toolbars.Copy ButtonReact copy to clipboard button that writes a value, then swaps to a check icon and Copied label for a moment. Accepts every Button variant and size.Floating Action ButtonA round primary button fixed to the bottom right corner of the viewport for the main action on a screen. Accepts every Button prop, including icons.Icon ButtonA square React button for icon only actions in small, default and large sizes with every Button variant. Its aria-label prop is required, so it is always named.Split ButtonSplit button with a primary action and a chevron that opens a dropdown of secondary actions, including destructive items. The menu matches the button width.Toggle GroupToggle group on Base UI that wraps Toggle buttons for single or multiple selection with shared keyboard navigation. Use it for text formatting or view modes.

All button components

Learn more

OTP input in React: paste, autofill and accessibilityGuide File upload in React: dropzone, progress and previewsGuide How to install components from a custom shadcn registryGuide Migrating a component library to Tailwind CSS v4Guide What is :focus-visible?Glossary What is Component library?Glossary What is Design system?Glossary