Button

Primary actions with variants and sizes.

Installation

Add this item from the registry, or import it from the package after installing Default File UI.

Registry path

itsvigneshv/default-file-ui/button

Package import

import { Button } from "@default-file/ui/components/df-button"

Primary action button.

All visual variants.

Text button sizes from xs to lg.

Icon-only, plus leading and trailing icon slots.

Leading and trailing accept any node: badge, counter, close, avatar.

Primary actions with variants, sizes, and optional leading or trailing content.

Prop	Type	Default	Notes
variant	"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"	"default"	Visual style of the button.
size	"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"	"default"	Height and padding. Icon sizes are square icon-only controls.
leading	ReactNode	—	Content before the label (for example an icon).
trailing	ReactNode	—	Content after the label.
disabled	boolean	—	Non-interactive button.
className	string	—	Additional styles.
…button attributes	ButtonHTMLAttributes	—	Native button props (type, onClick, aria-label, etc.).

Class helper for applying button styles to a non-button host.

Prop	Type	Default	Notes
dfButtonClass	(opts?: { variant?, size?, className? }) => string	—	Builds the same class string Button uses internally.