Back to site

Submit

Button for submitting a form.

---
import Submit from "@forms/submit/Submit.astro";
---

<Submit>
  Submit Form
</Submit>
---
blocks:
  _component: building-blocks/forms/submit
  text: Submit Form
---

Overview

A submit button used to send form data. Supports multiple visual variants, sizes, and optional icons. Text can be hidden to display an icon-only button, and the button can be disabled when needed. For a button that links to a page see Button.

Properties

text string | default: Submit

The text that goes inside the submit button.

variant enum | default: primary

The presentation of the submit button.

Accepted values:
  • primary
  • secondary
  • tertiary
  • ghost
  • text

size enum | default: md

The size of the submit button.

Accepted values:
  • sm
  • md
  • lg

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

hideText boolean | default: false

Whether to hide the button text and show only the icon.

disabled boolean | default: false

Whether the submit button is disabled.

Examples

Variants

---
import Submit from "@forms/submit/Submit.astro";
---

<Submit variant="primary">
  Primary Submit
</Submit>

<Submit variant="secondary">
  Secondary Submit
</Submit>

<Submit variant="tertiary">
  Tertiary Submit
</Submit>

<Submit variant="ghost">
  Ghost Submit
</Submit>

<Submit variant="text">
  Text Submit
</Submit>
---
blocks:
  - _component: building-blocks/forms/submit
    text: Primary Submit
    variant: primary
  - _component: building-blocks/forms/submit
    text: Secondary Submit
    variant: secondary
  - _component: building-blocks/forms/submit
    text: Tertiary Submit
    variant: tertiary
  - _component: building-blocks/forms/submit
    text: Ghost Submit
    variant: ghost
  - _component: building-blocks/forms/submit
    text: Text Submit
    variant: text
---

Sizes

---
import Submit from "@forms/submit/Submit.astro";
---

<Submit size="sm" variant="tertiary">
  Small Submit
</Submit>

<Submit size="md" variant="tertiary">
  Medium Submit
</Submit>

<Submit size="lg" variant="tertiary">
  Large Submit
</Submit>
---
blocks:
  - _component: building-blocks/forms/submit
    text: Small Submit
    size: sm
    variant: tertiary
  - _component: building-blocks/forms/submit
    text: Medium Submit
    size: md
    variant: tertiary
  - _component: building-blocks/forms/submit
    text: Large Submit
    size: lg
    variant: tertiary
---

Icons

---
import Submit from "@forms/submit/Submit.astro";
---

<Submit iconName="check" iconPosition="before" variant="tertiary">
  Submit with Icon
</Submit>

<Submit iconName="arrow-right" iconPosition="after" variant="tertiary">
  Submit with Icon After
</Submit>

<Submit hideText iconName="check" variant="tertiary" />
---
blocks:
  - _component: building-blocks/forms/submit
    text: Submit with Icon
    iconName: check
    iconPosition: before
    variant: tertiary
  - _component: building-blocks/forms/submit
    text: Submit with Icon After
    iconName: arrow-right
    iconPosition: after
    variant: tertiary
  - _component: building-blocks/forms/submit
    iconName: check
    hideText: true
    variant: tertiary
---