Version 0.40.0

UI Atoms

Buttons

Buttons colors

<button class="sui-a-button">
    Default
</button>

<button class="sui-a-button as--primary">
    Primary
</button>

<button class="sui-a-button as--secondary">
    Secondary
</button>

<button class="sui-a-button as--success">
    Success
</button>

<button class="sui-a-button as--warning">
    Warning
</button>

<button class="sui-a-button as--danger">
    Danger
</button>

<button class="sui-a-button as--danger-secondary">
    Danger secondary
</button>

<button class="sui-a-button as--link">
    Link
</button>

<button class="sui-a-button as--link-alt">
    Link alt
</button>

Contextual buttons

Use contextual buttons in other components like cards or list.

<button class="sui-a-button as--contextual">
    Button contextual
</button>

Buttons sizes

<button class="sui-a-button as--xs">
    Extra small
</button>

<button class="sui-a-button as--sm">
    Small
</button>

<button class="sui-a-button">
    Default
</button>

<button class="sui-a-button as--lg">
    Large
</button>

<button class="sui-a-button as--xl">
    Extra large
</button>

Square button

<button class="sui-a-button as--square">
    B
</button>

Block

<button class="sui-a-button as--block">
    Button block
</button>

Button rounded

<button class="sui-a-button as--rounded">
    Button rounded
</button>

Button disabled

<button class="sui-a-button" disabled>
    Button disabled
</button>

<button class="sui-a-button as--disabled">
    Button disabled
</button>

Loading state

<button class="sui-a-button as--loading">
  Default
  
</button>

Play with the grid

<div class="sui-g-grid as--center">
    <div class="sui-g-grid__item as--1_2@sm as--1_3@md as--1_4@lg as--order-1@sm">
        <button class="sui-a-button as--block as--primary">
            Confirm
        </button>
    </div>
    <div class="sui-g-grid__item as--1_2@sm as--1_3@md as--1_4@lg">
        <button class="sui-a-button as--block">
            Cancel
        </button>
    </div>
</div>

<div class="sui-g-grid as--auto">
    <div class="sui-g-grid__item">
        <button class="sui-a-button as--block as--primary">
            Confirm
        </button>
    </div>
    <div class="sui-g-grid__item">
        <button class="sui-a-button as--block">
            Cancel
        </button>
    </div>
</div>

<div class="sui-g-grid as--auto">
    <div class="sui-g-grid__item">
        <button class="sui-a-button as--block as--primary">
            Confirm
        </button>
    </div>
    <div class="sui-g-grid__item as--pull">
        <button class="sui-a-button as--block">
            Cancel
        </button>
    </div>
</div>