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

hideText string | default: false

link string

iconName string

iconPosition string | default: before

variant string | default: primary

size string | default: md

Slots

default

The button content. Used only when the text property is not set.

Examples

Sizes

Small Medium Large

---
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

Primary Secondary Tertiary Ghost Text

---
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

Find out more

Everything you need

---
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
---