Copied content to clipboard.

All buttons

Default

Example

        <button class="pb-button">
        <span class="pb-button_label">Default</span>
    </button>

Active

Example

        <button class="pb-button pb-button--active">
        <span class="pb-button_label">Active</span>
    </button>

Disabled

Example

        <button class="pb-button pb-button--disabled">
        <span class="pb-button_label">Disabled</span>
    </button>

Raised

Example

        <button class="pb-button pb-button--raised">
        <span class="pb-button_label">Raised</span>
    </button>

Text

Example

        <button class="pb-button pb-button--text">
        <span class="pb-button_label">Text</span>
    </button>

Text active

Example

        <button class="pb-button pb-button--text pb-button--active">
        <span class="pb-button_label">Text active</span>
    </button>

Text disabled

Example

        <button class="pb-button pb-button--text pb-button--disabled">
        <span class="pb-button_label">Text disabled</span>
    </button>

Outline

Example

        <button class="pb-button pb-button--outline">
        <span class="pb-button_label">Outline</span>
    </button>

Outline active

Example

        <button class="pb-button pb-button--outline pb-button--active">
        <span class="pb-button_label">Outline active</span>
    </button>

Outline disabled

Example

        <button class="pb-button pb-button--outline pb-button--disabled">
        <span class="pb-button_label">Outline disabled</span>
    </button>

Icon left

Example

        <button class="pb-button">
        <span class="pb-button_label">Icon left</span>
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_arrow_back"/>
</svg>
    </button>

Icon right

Example

        <button class="pb-button pb-button--iconright">
        <span class="pb-button_label">Icon right</span>
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_arrow_forward"/>
</svg>
    </button>

Icon only

Example

        <button class="pb-button pb-button--icon">
        <span class="pb-button_label">Icon only</span>
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_settings"/>
</svg>
    </button>