Components
Buttons
Three levels of emphasis, one consistent shape. Choose solid, outlined, or borderless buttons to make the next step clear.
Usage & approach
Use one primary action per task, a secondary button for an alternative, and a tertiary button for a low-emphasis action. Insurance green (#006838) remains the primary fill in both themes. Use button for actions and anchors for navigation. Examples are visual references: they do not save, submit, or navigate. Set type="submit" only in a real form. States change instantly, without animation.
Specifications
- Shared shape
- rounded-md (6px); border; min-h-11 (44px); gap-2 (8px).
- Label and padding
- text-sm font-semibold; px-5 py-2.5. Use short, specific action labels.
- Primary · solid
- bg-[#006838] text-white; enabled:hover:bg-[#00552e]; enabled:active:bg-[#004525].
- Secondary · outlined
- border-[#006838] bg-transparent text-[#006838]; dark:border-[#707873] dark:text-[#f4f5f2].
- Tertiary · borderless
- border-transparent bg-transparent; a subtle surface appears on hover and press.
- Focus and disabled
- focus-visible:outline-2 focus-visible:outline-offset-2; green outline in light mode, white in dark mode. Native disabled + disabled:opacity-50. enabled: variants prevent disabled hover styles.
Primary · solid
For the most important action: continue, submit, or confirm. Insurance green and white text stay the same in both themes.
<div class="flex flex-wrap items-center gap-3">
<button type="button" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-5 py-2.5 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:focus-visible:outline-white disabled:cursor-not-allowed disabled:opacity-50 border-transparent bg-[#006838] text-white enabled:hover:bg-[#00552e] enabled:active:bg-[#004525]">Continue to review</button>
<button type="button" disabled class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-5 py-2.5 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:focus-visible:outline-white disabled:cursor-not-allowed disabled:opacity-50 border-transparent bg-[#006838] text-white enabled:hover:bg-[#00552e] enabled:active:bg-[#004525]">Continue to review</button>
</div>HTML + Tailwind CSS · fit to panel
Secondary · outlined
For an alternative action such as saving a draft. The green outline becomes a readable neutral outline on dark surfaces.
<div class="flex flex-wrap items-center gap-3">
<button type="button" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-5 py-2.5 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:focus-visible:outline-white disabled:cursor-not-allowed disabled:opacity-50 border-[#006838] bg-transparent text-[#006838] enabled:hover:bg-[#f1f2f0] enabled:active:bg-[#d0e3c8] dark:border-[#707873] dark:text-[#f4f5f2] dark:enabled:hover:bg-[#303232] dark:enabled:active:bg-[#3d4140]">Save draft</button>
<button type="button" disabled class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-5 py-2.5 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:focus-visible:outline-white disabled:cursor-not-allowed disabled:opacity-50 border-[#006838] bg-transparent text-[#006838] enabled:hover:bg-[#f1f2f0] enabled:active:bg-[#d0e3c8] dark:border-[#707873] dark:text-[#f4f5f2] dark:enabled:hover:bg-[#303232] dark:enabled:active:bg-[#3d4140]">Save draft</button>
</div>HTML + Tailwind CSS · fit to panel
Tertiary · borderless
For low-emphasis actions such as going back or cancelling. It keeps the same target size and gains a subtle fill on hover or press.
<div class="flex flex-wrap items-center gap-3">
<button type="button" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-5 py-2.5 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:focus-visible:outline-white disabled:cursor-not-allowed disabled:opacity-50 border-transparent bg-transparent text-[#006838] enabled:hover:bg-[#f1f2f0] enabled:active:bg-[#d0e3c8] dark:text-[#f4f5f2] dark:enabled:hover:bg-[#303232] dark:enabled:active:bg-[#3d4140]">Go back</button>
<button type="button" disabled class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-5 py-2.5 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:focus-visible:outline-white disabled:cursor-not-allowed disabled:opacity-50 border-transparent bg-transparent text-[#006838] enabled:hover:bg-[#f1f2f0] enabled:active:bg-[#d0e3c8] dark:text-[#f4f5f2] dark:enabled:hover:bg-[#303232] dark:enabled:active:bg-[#3d4140]">Go back</button>
</div>HTML + Tailwind CSS · fit to panel
Interaction states
Static primary-button state swatches for comparison. Hover and press the live examples above, or use Tab to inspect keyboard focus. These labelled swatches do not represent saved selection states.
<div class="grid grid-cols-2 gap-x-4 gap-y-6 sm:grid-cols-3 lg:grid-cols-5">
<div><p class="mb-3 text-xs text-[#333] dark:text-[#c4c7c5]">Default</p><span class="inline-flex min-h-11 items-center justify-center rounded-md border border-transparent bg-[#006838] px-5 py-2.5 text-sm font-semibold text-white">Continue</span></div>
<div><p class="mb-3 text-xs text-[#333] dark:text-[#c4c7c5]">Hover</p><span class="inline-flex min-h-11 items-center justify-center rounded-md border border-transparent bg-[#00552e] px-5 py-2.5 text-sm font-semibold text-white">Continue</span></div>
<div><p class="mb-3 text-xs text-[#333] dark:text-[#c4c7c5]">Pressed</p><span class="inline-flex min-h-11 items-center justify-center rounded-md border border-transparent bg-[#004525] px-5 py-2.5 text-sm font-semibold text-white">Continue</span></div>
<div><p class="mb-3 text-xs text-[#333] dark:text-[#c4c7c5]">Keyboard focus</p><span class="inline-flex min-h-11 items-center justify-center rounded-md border border-transparent bg-[#006838] px-5 py-2.5 text-sm font-semibold text-white outline-2 outline-offset-2 outline-[#006838] dark:outline-white">Continue</span></div>
<div><p class="mb-3 text-xs text-[#333] dark:text-[#c4c7c5]">Disabled</p><span class="inline-flex min-h-11 items-center justify-center rounded-md border border-transparent bg-[#006838] px-5 py-2.5 text-sm font-semibold text-white opacity-50">Continue</span></div>
</div>HTML + Tailwind CSS · fit to panel
Sizing
Compact, default, and large treatments share a 44px minimum target. Keep sizing consistent within an action group.
<div class="flex flex-wrap items-center gap-4">
<button type="button" class="inline-flex min-h-11 items-center justify-center rounded-md border border-transparent bg-[#006838] px-3 py-2 text-xs font-semibold text-white enabled:hover:bg-[#00552e] enabled:active:bg-[#004525] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:focus-visible:outline-white">Compact</button>
<button type="button" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-5 py-2.5 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:focus-visible:outline-white disabled:cursor-not-allowed disabled:opacity-50 border-transparent bg-[#006838] text-white enabled:hover:bg-[#00552e] enabled:active:bg-[#004525]">Default</button>
<button type="button" class="inline-flex min-h-12 items-center justify-center rounded-md border border-transparent bg-[#006838] px-6 py-3 text-base font-semibold text-white enabled:hover:bg-[#00552e] enabled:active:bg-[#004525] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:focus-visible:outline-white">Large</button>
</div>HTML + Tailwind CSS · fit to panel
Responsive action group
Primary comes first in reading and keyboard order. Actions stack full-width on mobile and sit together from 640px, with 12px gaps.
<div class="flex flex-col items-stretch gap-3 sm:flex-row sm:flex-wrap sm:items-center">
<button type="button" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-5 py-2.5 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:focus-visible:outline-white disabled:cursor-not-allowed disabled:opacity-50 border-transparent bg-[#006838] text-white enabled:hover:bg-[#00552e] enabled:active:bg-[#004525]">Continue to review</button>
<button type="button" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-5 py-2.5 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:focus-visible:outline-white disabled:cursor-not-allowed disabled:opacity-50 border-[#006838] bg-transparent text-[#006838] enabled:hover:bg-[#f1f2f0] enabled:active:bg-[#d0e3c8] dark:border-[#707873] dark:text-[#f4f5f2] dark:enabled:hover:bg-[#303232] dark:enabled:active:bg-[#3d4140]">Save draft</button>
<button type="button" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-5 py-2.5 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:focus-visible:outline-white disabled:cursor-not-allowed disabled:opacity-50 border-transparent bg-transparent text-[#006838] enabled:hover:bg-[#f1f2f0] enabled:active:bg-[#d0e3c8] dark:text-[#f4f5f2] dark:enabled:hover:bg-[#303232] dark:enabled:active:bg-[#3d4140]">Cancel</button>
</div>HTML + Tailwind CSS · fit to panel
Bring this into your project
Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.