Corepanel – Button

Variant

Four appearances are available: default, solid, twoTone and plain.

<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm border border-border bg-surface text-text hover:bg-subtle hover:border-border-strong">Default</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-primary text-on-primary hover:bg-primary-strong">Solid</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-primary-soft text-primary hover:bg-primary-100 dark:hover:bg-primary-soft">Two Tone</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm text-text hover:bg-subtle">Plain</button>

Size

Buttons come in four sizes — xs, sm, md and lg. The default is md.

<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-8 px-3 text-xs bg-primary text-on-primary hover:bg-primary-strong">XS</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-9 px-3.5 text-sm bg-primary text-on-primary hover:bg-primary-strong">SM</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-primary text-on-primary hover:bg-primary-strong">MD</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-11 px-5 text-base bg-primary text-on-primary hover:bg-primary-strong">LG</button>

Color

Semantic colors map to the design tokens, so they follow the theme automatically.

<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-primary text-on-primary hover:bg-primary-strong">Primary</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-success text-white hover:opacity-90 dark:text-slate-900">Success</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-warning text-slate-900 hover:opacity-90">Warning</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-danger text-white hover:opacity-90 dark:text-slate-900">Danger</button>

Disabled

The disabled attribute dims the button and removes pointer events.

<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-primary text-on-primary hover:bg-primary-strong" disabled>Solid</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm border border-border bg-surface text-text hover:bg-subtle hover:border-border-strong" disabled>Default</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-primary-soft text-primary hover:bg-primary-100 dark:hover:bg-primary-soft" disabled>Two Tone</button>

Shape

Swap the radius utility to change the shape — rounded, circle or square.

<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-primary text-on-primary hover:bg-primary-strong">Rounded</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-full font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-primary text-on-primary hover:bg-primary-strong">Circle</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-none font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-primary text-on-primary hover:bg-primary-strong">Square</button>

Icon

A fixed square size with no padding gives an icon-only button. Always provide an aria-label.

<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none border border-border bg-surface text-text hover:bg-subtle hover:border-border-strong h-10 w-10 p-0" aria-label="plus">
  <i class="ph ph-plus text-lg"></i>
</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none border border-border bg-surface text-text hover:bg-subtle hover:border-border-strong h-10 w-10 p-0" aria-label="pencil-simple">
  <i class="ph ph-pencil-simple text-lg"></i>
</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none border border-border bg-surface text-text hover:bg-subtle hover:border-border-strong h-10 w-10 p-0" aria-label="trash">
  <i class="ph ph-trash text-lg"></i>
</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none border border-border bg-surface text-text hover:bg-subtle hover:border-border-strong h-10 w-10 p-0" aria-label="dots-three">
  <i class="ph ph-dots-three text-lg"></i>
</button>

Button With Icon

Icons can lead or trail the label; the flex gap handles the spacing.

<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-primary text-on-primary hover:bg-primary-strong">
  <i class="ph ph-plus text-base"></i>
  <span>Add item</span>
</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm border border-border bg-surface text-text hover:bg-subtle hover:border-border-strong">
  <span>Download</span>
  <i class="ph ph-download-simple text-base"></i>
</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-primary-soft text-primary hover:bg-primary-100 dark:hover:bg-primary-soft">
  <i class="ph ph-funnel text-base"></i>
  <span>Filter</span>
</button>

Loading

A spinning ring plus the disabled attribute communicates work in progress.

<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-primary text-on-primary hover:bg-primary-strong" disabled>
  <span class="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" aria-hidden="true"></span>
  <span>Loading…</span>
</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm border border-border bg-surface text-text hover:bg-subtle hover:border-border-strong" disabled>
  <span class="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" aria-hidden="true"></span>
  <span>Please wait</span>
</button>

Block

Add w-full to stretch a button to its container.

<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm bg-primary text-on-primary hover:bg-primary-strong w-full">Block button</button>
<button type="button" class="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-50 disabled:pointer-events-none h-10 px-4 text-sm border border-border bg-surface text-text hover:bg-subtle hover:border-border-strong w-full">Block default</button>