Skip to content
Monk BusinessMonk BusinessMonk Business Design System

Button

Buttons start an action or lead to the next step. There are three kinds: primary, secondary and text.

Primary, secondary, text and disabledDark · Grafite
Pedir orçamentoFalar no WhatsApp
Primary, secondary, text and disabledLight · Gelo
Pedir orçamentoFalar no WhatsApp

Kinds

Section titled “Kinds”
  • Primary (primary fill, on-primary text): the one main action of a view, such as “Pedir orçamento”. At most one per section. On hover it turns teal-300 on dark and teal-800 on light.
  • Secondary (transparent, border-strong outline, fg text): the alternative next to a primary, such as “Falar no WhatsApp”.
  • Text (link color, underlined): low-emphasis actions inside text or cards.

Usage

Section titled “Usage”

Do

  • Write a label in sentence case that says what happens: "Enviar pedido", not "Enviar" or "Clique aqui".
  • Use href (an <a>) when it navigates and a <button> when it acts.
  • Keep the 44px minimum height and the 2px focus ring on keyboard focus.
  • Disable with aria-disabled and keep the label visible ("Enviando…").

Don't

  • Use primary twice in one section.
  • Write labels in all caps.
  • Use buttons for plain navigation links in running text.
  • Disable the submit button to signal form errors: show the errors instead.

Astro

Section titled “Astro”
---
import Button from '@monk-business/astro/Button.astro';
---


<Button href="/contato/">Pedir orçamento</Button>
<Button href="https://wa.me/5511…" variant="secondary" external>Falar no WhatsApp</Button>
<Button variant="text">Ver todos os serviços</Button>
<Button type="submit" disabled>Enviando…</Button>

HTML

Section titled “HTML”
<a class="mb-btn mb-btn--primary" href="/contato/">Pedir orçamento</a>
<a class="mb-btn mb-btn--secondary" href="https://wa.me/5511…" target="_blank" rel="noopener noreferrer">
  Falar no WhatsApp <span class="mb-sr-only">(abre em nova aba)</span>
</a>
<button class="mb-btn mb-btn--text" type="button">Ver todos os serviços</button>
<button class="mb-btn mb-btn--primary" type="submit" aria-disabled="true">Enviando…</button>

Props

Section titled “Props”
Button props · also accepts the attributes of <button>
PropTypeDefaultDescription
variant'primary'| 'secondary'| 'text''primary'primary: the one main action of a section. secondary: the alternative next to a primary. text: low-emphasis actions inside text or cards.
hrefstring| URL—Link target. When set the button renders as <a>.
type'button'| 'submit'| 'reset''button'Type of the <button> element.
disabledbooleanfalseMarks the button unavailable with aria-disabled="true": it keeps its label and stays focusable. Your code must ignore activation while disabled. A disabled link loses its href.
externalbooleanfalseOpens the link in a new tab (target="_blank", rel="noopener noreferrer") and appends a visually hidden note for screen readers.
externalLabelstring'(abre em nova aba)'The visually hidden note added to external links.
blockbooleanfalseStretch to the full width of the container.
hreflangstring—Language of the linked page (links only).
downloadboolean| string—Download the linked file instead of opening it (links only).
relstring—Link relationship (links only).

* required.