Select UI framework
Get Started
Radix UI
AlertApp Store ButtonAspect RatioBadgeBannerBreadcrumbButton GroupButtonCheckboxCommand MenuCompactButtonDialogDrawerDropdown MenuEmptyFancy ButtonFile UploadHintInput OTPInputItemKbdLabelLinkButtonLoaderPopoverProgress BarProgress CircleRadio GroupRatingSelectSeparatorSkeletonSliderSocial ButtonSwitchTagTextareaToggle GroupToggleTooltip
Component compact-button-demo not found in registry.
Installation
pnpm dlx shadcn@latest add compact-button
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
borderedmutedghostbordered
size
mdsmmd
asChild
booleanfalse
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-