Buttons

Buttons trigger actions and guide users through workflows. Use the appropriate variant based on hierarchy and context.

Primary Button

Use primary buttons for the main action on a page. Limit to one primary button per view.

className="px-6 py-3 rounded-xl bg-tide text-white font-semibold shadow-lg shadow-tide/25 hover:bg-tide transition-colors"

Use secondary buttons for alternative actions that don't compete with the primary action.

className="px-6 py-3 rounded-xl border-2 border-tide text-tide font-semibold hover:bg-tide hover:text-white transition-colors"

Use accent buttons to draw extra attention, typically for promotional CTAs or special actions.

className="px-6 py-3 rounded-xl bg-sunshine text-abyss font-semibold shadow-lg shadow-sunshine/25 hover:brightness-110 transition-all"

Use ghost buttons on dark backgrounds or when you need a subtle action that doesn't distract.

className="px-6 py-3 rounded-xl border-2 border-white/30 text-white font-semibold hover:bg-white/10 transition-colors"

Use different sizes based on context. Small for dense UIs, large for primary CTAs.

Small

px-4 py-2 text-sm rounded-lg

Medium (default)

px-6 py-3 rounded-xl

Large

px-8 py-4 text-lg rounded-xl

Use icon buttons for common actions like close, edit, or delete. Always include aria-label for accessibility.

className="w-10 h-10 rounded-xl bg-tide text-white flex items-center justify-center hover:bg-tide transition-colors"

Pair icons with text to add visual cues and improve scannability.

Group related actions together. Use consistent sizing within groups.

Inline Actions

Segmented Control

Don't