Uimini

# Button

To trigger an operation.

Uimini provide 8 types of button:

  • Default
  • Secondary
  • Primary
  • Success
  • Warning
  • Dangerous
  • Link
  • Text

# Default buttons:

<div class="ui-button-group">
  <button class="ui-button isDefault">Default</button>
  <button class="ui-button isPrimary">Primary</button>
  <button class="ui-button isSuccess">Success</button>
  <button class="ui-button isWarning">Warning</button>
  <button class="ui-button isDangerous">Dangerous</button>
</div>

# Outline buttons:

<div class="ui-button-group">
  <button class="ui-button isOutline isDefault">Default</button>
  <button class="ui-button isOutline isPrimary">Primary</button>
  <button class="ui-button isOutline isSuccess">Success</button>
  <button class="ui-button isOutline isWarning">Warning</button>
  <button class="ui-button isOutline isDangerous">Dangerous</button>
</div>

# With icons:

<div class="ui-button-group">
  <button class="ui-button isPrimary">
    <!-- <svg> or <img> is here -->
  </button>
  <button class="ui-button isPrimary">
    <!-- <svg> or <img> is here -->
    Download
  </button>
  <button class="ui-button isDangerous">
    <!-- <svg> or <img> is here -->
    Remove
  </button>
  <button class="ui-button isLink">
    <!-- <svg> or <img> is here -->
    Link to send
  </button>
</div>

# Helpers:

<div class="ui-button-group">
  <button class="ui-button isDefault">Default button</button>
  <button class="ui-button isSecondary">Secondary button</button>
  <button class="ui-button isLink">Link button</button>
  <button class="ui-button isText">Text button</button>
</div>

# Statuses

Uimini provide 3 types of statuses:

  • isLoading: loading status
  • isActive: active status
  • isDisabled: disabled status

# Loading Status:

<section class="ui-section">
  <div class="ui-button-group">
    <button class="ui-button isDefault isLoading isDisabled">Loading</button>
    <button class="ui-button isSecondary isLoading isDisabled">Loading</button>
    <button class="ui-button isPrimary isLoading isDisabled">Loading</button>
    <button class="ui-button isDangerous isLoading isDisabled">Loading</button>
    <!-- empty button -->
    <button class="ui-button isSecondary isLoading isDisabled"></button>
    <button class="ui-button isPrimary isLoading isDisabled"></button>
  </div>
</section>

# Active Status:

<section class="ui-section">
  <div class="ui-button-group">
    <button class="ui-button isPrimary">Primary</button>
    <button class="ui-button isPrimary isActive">Active primary</button>
  </div>
</section>

# Disabled Status:

<section class="ui-section">
  <div class="ui-button-group">
    <button class="ui-button isPrimary">Primary</button>
    <button class="ui-button isPrimary isDisabled">Disabled primary</button>
    <button class="ui-button isDangerous">Danger</button>
    <button class="ui-button isDangerous isDisabled">Disabled danger</button>
  </div>
</section>

← Button Group →