Back to site

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. Sourced from [Heroicons](https://heroicons.com/). See the Icon component documentation for more information.

iconColor enum | default: default

The color of the icon.

Accepted values:
  • default
  • blue
  • green
  • yellow
  • orange
  • red
  • purple
  • pink
  • cyan

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

Icon colors # 

---
import Button from "@core-elements/button/Button.astro";
---

<Button iconColor="yellow" iconName="bolt" variant="tertiary">
  Yellow
</Button>

<Button iconColor="red" iconName="heart" variant="tertiary">
  Red
</Button>

<Button iconColor="green" iconName="check-circle" variant="tertiary">
  Green
</Button>

<Button hideText iconColor="purple" iconName="star" variant="tertiary">
  Purple
</Button>

<Button hideText iconColor="blue" iconName="bell" variant="tertiary">
  Blue
</Button>
---
blocks:
  - _component: building-blocks/core-elements/button
    iconName: bolt
    iconColor: yellow
    text: Yellow
    variant: tertiary
  - _component: building-blocks/core-elements/button
    iconName: heart
    iconColor: red
    text: Red
    variant: tertiary
  - _component: building-blocks/core-elements/button
    iconName: check-circle
    iconColor: green
    text: Green
    variant: tertiary
  - _component: building-blocks/core-elements/button
    iconName: star
    iconColor: purple
    text: Purple
    hideText: true
    variant: tertiary
  - _component: building-blocks/core-elements/button
    iconName: bell
    iconColor: blue
    text: Blue
    hideText: true
    variant: tertiary
---