Compound
CompoundButton is a large button with an icon and two lines of text: the main label and a description of the action.
Shares appearance/size/shape with Button, but its height follows the content and the icon is 32px (small) or 40px (medium, large). The second line is one step smaller than the label (caption2 / caption1 / body1 by size), in foreground-2 (foreground-on-brand on primary and danger). Supports asChild, iconPosition and icon-only.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { CompoundButton } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Appearance
secondary (default), primary, outline, subtle, transparent.
Size
small (32px icon), medium and large (40px icon).
Icon position, icon-only & disabled
iconPosition="after"; leave out children for an icon-only button (aria-label required).
Link (asChild)
Keeps the CompoundButton look but renders an <a> element.
Usage
Do
- Use it when the description helps people understand the consequence of the action.
- Keep the second line short: one line, no final period.
- Use 24/28 icons (scaled up to 32/40) so they balance the button height.
Don't
- Don't use it in toolbars or dense rows of buttons. Use Button.
- Don't place several primary CompoundButtons side by side.
- Don't put long paragraphs in secondaryContent.
Props
| Prop · Type | Default | Description |
|---|---|---|
| secondaryContentReactNode | Default: — | Second line of description (one step smaller than the label, foreground-2). |
| iconReactNode | Default: — | Large icon: 32px (small) / 40px (medium, large). |
| iconPosition"before" | "after" | Default: "before" | Icon position. |
| appearance"secondary" | "primary" | "outline" | "subtle" | "transparent" | "danger" | Default: "secondary" | Same as Button. |
| size"small" | "medium" | "large" | Default: "medium" | Padding, font size and icon size. |
| shape"rounded" | "circular" | "square" | Default: "rounded" | Corner rounding. |
| iconOnlyboolean | Default: — | Turns on when there is an icon and no children / secondaryContent. |
| asChildboolean | Default: false | Renders into the child element (e.g. <a>). |