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

variant string | default: primary

size string | default: md

iconName string

iconPosition string | default: before

hideText string | default: false

disabled string | default: false

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