Button
Clickable button for calls-to-action and navigation.
---
import Button from "@core-elements/button/Button.astro";
---
<Button size="md" variant="primary">
Try it now!
</Button>---
blocks:
_component: building-blocks/core-elements/button
variant: primary
size: md
text: Try it now!
---Overview
A button component for calls-to-action and navigation. Supports multiple variants (primary, secondary, ghost, outline), sizes, and optional icons. Can only be used within a Button Group. Use Submit for form submissions.
Properties
text string | default: My Button
The text that goes inside the button.
hideText boolean | default: false
Whether to hide the button text and show only the icon.
link string
The URL to which the button should link.
iconName enum
The name of the icon to display. See the Icon component documentation for more information.
iconPosition enum | default: before
The position of the icon relative to the text.
Accepted values:
-
before -
after
variant enum | default: primary
The presentation of button.
Accepted values:
-
primary -
secondary -
tertiary -
ghost -
text
size enum | default: md
The size of the button.
Accepted values:
-
sm -
md -
lg
Slots
default
The button content.
Used only when the text property is not set.
Examples
Sizes
---
import Button from "@core-elements/button/Button.astro";
---
<Button size="sm" variant="primary">
Small
</Button>
<Button size="md" variant="primary">
Medium
</Button>
<Button size="lg" variant="primary">
Large
</Button>---
blocks:
- _component: building-blocks/core-elements/button
variant: primary
size: sm
text: Small
- _component: building-blocks/core-elements/button
variant: primary
size: md
text: Medium
- _component: building-blocks/core-elements/button
variant: primary
size: lg
text: Large
---Variants
---
import Button from "@core-elements/button/Button.astro";
---
<Button variant="primary">
Primary
</Button>
<Button variant="secondary">
Secondary
</Button>
<Button variant="tertiary">
Tertiary
</Button>
<Button variant="ghost">
Ghost
</Button>
<Button variant="text">
Text
</Button>---
blocks:
- _component: building-blocks/core-elements/button
variant: primary
text: Primary
- _component: building-blocks/core-elements/button
variant: secondary
text: Secondary
- _component: building-blocks/core-elements/button
variant: tertiary
text: Tertiary
- _component: building-blocks/core-elements/button
variant: ghost
text: Ghost
- _component: building-blocks/core-elements/button
variant: text
text: Text
---Icons
---
import Button from "@core-elements/button/Button.astro";
---
<Button hideText iconName="cake" variant="tertiary">
Cake
</Button>
<Button iconName="check" variant="tertiary">
Find out more
</Button>
<Button iconName="arrow-down-right" iconPosition="after" variant="tertiary">
Everything you need
</Button>---
blocks:
- _component: building-blocks/core-elements/button
iconName: cake
text: Cake
hideText: true
variant: tertiary
- _component: building-blocks/core-elements/button
iconName: check
text: Find out more
variant: tertiary
- _component: building-blocks/core-elements/button
iconName: arrow-down-right
iconPosition: after
text: Everything you need
variant: tertiary
---