Buttons

Variants

primary for the main call-to-action, secondary for supporting actions (muted fill), outline for bordered actions without fill, ghost for tertiary or de-emphasized actions.

Sizes

Three size tiers. Padding scales disproportionately — larger buttons get more generous horizontal padding. Border radius shifts from rounded-sm at small to rounded-md at medium and large.

With Icons

Icons sit inside the button's gap-2 flex layout. Use trailing icons for forward navigation, leading icons for contextual actions. Icon size should match the font size tier.

Icon Only

Square buttons with equal padding on all sides. Requires aria-label for accessibility since there's no visible text.

Disabled

Disabled buttons get opacity-50 and cursor-not-allowed. Works across all variants.

As Link

as="a" renders an <a> element with button styling. Pass href, target, and rel as normal. All variants and sizes work.

Common Pairings

Buttons rarely appear alone. Primary + secondary for decision points, primary + ghost for soft dismissal, size-matched pairs for visual balance.

Hero CTA pair

Form actions

Card actions

Inline navigation

Anatomy

Class construction breakdown for the default primary button. The Astro component assembles these from variant and size props. All states use real pseudo-classes — hover, click, and tab to see them.