CompactButton

PreviousNext

A compact button for small ui elements like close buttons and small navigation arrows.

Component compact-button-demo not found in registry.

Installation

pnpm dlx shadcn@latest add compact-button --template react-aria

Usage

import { CompactButton } from "@/components/ui/compact-button"
<CompactButton.Root appearance="bordered">Compact</CompactButton.Root>

Examples

Bordered

Component compact-button-bordered not found in registry.

Muted

Component compact-button-muted not found in registry.

Ghost

Component compact-button-ghost not found in registry.

Demo

Component compact-button-demo not found in registry.

Disabled

Component compact-button-disabled not found in registry.

Icon Only

Component compact-button-icon-only not found in registry.

As Child

Component compact-button-as-child not found in registry.

Props

CompactButton.Root

This component is based on the <button> element and supports all of its props.

Prop

Type

Default

appearance
bordered
muted
ghost
bordered
size
md
sm
md
asChild
boolean
false
className
string
-
children
ReactNode
-

CompactButton.Icon

This component is used to render an icon inside the compact button. It supports polymorphic as prop and will inherit sizing and appearance from the parent button.

Prop

Type

Default

as
React.ElementType
-