ComponentsPrimitives
Button
A native button or link with variants, sizes and per-instance classes.
Install
npx ghostcn@1.4.0 add button --skip-existingUsage
Omit href for a native button; it defaults to type="button". Use trusted URLs for links. A disabled link has no href or Portal action. Use class on the button itself; there is no buttonClass slot.
{{> "components/button" text="About the publication" href="/about/" variant="outline"}}Component options
| Parameter | Behavior |
|---|---|
variant | Visual treatment; unknown values fall back to default. Values: default, secondary, outline, ghost, destructive, link. Default: default. |
size | Component scale; unknown values fall back to default. Values: sm, default, lg. Default: default. |
text | Visible, escaped label. Default: Button. |
href | Trusted link URL. Omit to render a button. |
type | Button type (ignored for links). Values: button, submit, reset. Default: button. |
disabled | Boolean. Disables a button or removes navigation from a link. |
ariaLabel | Optional accessible name. |
dataPortal | Optional native Ghost Portal action for enabled links. |
Use unquoted booleans, for example true and false, rather than strings.
Customize this instance
{{> "components/button" text="About the publication" href="/about/" variant="outline" class="rounded-xl bg-purple-700 text-white hover:bg-purple-800"}}Styling parameters
| Parameter | Target |
|---|---|
class | Component root — .ghcn-ui-button |
Styling parameters affect only elements that render. See Style component instances for specificity, dark mode, and preserving customizations.
Installed files
partials/components/button.hbsassets/css/components/button.css
Was this helpful?