◆ Hermod Mail is pre-v0.1 — release acceptance is still in progress Read the release status →
Components Templates Pricing Docs Guides Changelog Contact Read the docs
← All components
ACTION

HermodButton

Since pre-v0.1 · Maizzle source

A brand-token-aware wrapper around Maizzle’s Button component with solid, outline, ghost, and link variants.

<!-- src/components/HermodButton.vue -->

<HermodButton href="__HERMOD_CTA_URL__" variant="solid" size="lg" shape="rounded" full-width>View invoice</HermodButton>

Props

Prop Type Default Description
href string — Destination URL. Required.
variant 'solid' | 'outline' | 'ghost' | 'link' 'solid' Visual treatment.
size 'sm' | 'md' | 'lg' 'md' Tokenized padding and text size.
shape 'rounded' | 'pill' 'rounded' Rounded or pill treatment.
fullWidth boolean false Stretch to the container width.
icon string — Optional icon image URL forwarded to Maizzle Button.
DO
✓Keep labels under 25 characters so they never wrap in narrow clients.
✓Use one primary button per email; demote the rest to outline or link.
✓Set size="lg" for anything a thumb must hit.
DON'T
✗Do not render buttons as images — they break with images off.
✗Do not rely on radius above 8px in Outlook 2013.
✗Do not nest buttons inside another table cell with fixed height.
ACCESSIBILITY
—Renders a real anchor with descriptive text, never a bare "Click here".
—Accessible labels and token contrast remain the consuming application’s responsibility.

Build Laravel email locally

Start with eight MIT Core templates. Pro licensing and stable release are still prelaunch.

Read setup guide Contact
Docs Contact