Buttons#

Buttons include simple button styles for actions in different types and sizes.

Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary.

<button class="btn">Standard</button>
<button class="btn btn-primary">Primary</button>

Secondary Buttons#

<button class="btn btn-success">Subtle</button>
<button class="btn btn-info">Subtle</button>
<button class="btn btn-error">Cancel</button>

Add the disabled class or the disabled attribute for disabled button state style.

<!-- buttons with disabled state -->
<button class="btn disabled" tabindex="-1">disabled button</button>

A button with the loading class can show loading indicator.

<!-- buttons with loading state -->
<button class="btn loading">button</button>
<button class="btn btn-primary loading">primary button</button>

A button with an icon

Hello

<!-- buttons with loading state -->
<button class="btn btn-primary">
  <i class="icon icon-arrow-down mr-2"></i>
  Hello
</button>

Compact Buttons#

Can be used in UI that doctors use but not for patients since 14px does not meet elderly UI requirements.

Compact Compact Compact

<button class="btn btn-compact">Compact</button>
<button class="btn btn-primary btn-compact">Compact</button>
<button class="btn btn-success btn-compact">Compact</button>