Buttons

<button type="button" class="btn btn-brand">Brand</button>&nbsp;
<button type="button" class="btn btn-primary">Primary</button>&nbsp;
<button type="button" class="btn btn-secondary">Secondary</button>&nbsp;
<button type="button" class="btn btn-success">Success</button>&nbsp;
<button type="button" class="btn btn-danger">Danger</button>&nbsp;
<button type="button" class="btn btn-warning">Warning</button>&nbsp;
<button type="button" class="btn btn-info">Info</button>&nbsp;
<button type="button" class="btn btn-light">Light</button>&nbsp;
<button type="button" class="btn btn-dark">Dark</button>&nbsp;
<a href="#" class="btn btn-link">Link</a>

<button type="button" class="btn btn-outline-brand">Brand</button>&nbsp;
<button type="button" class="btn btn-outline-primary">Primary</button>&nbsp;
<button type="button" class="btn btn-outline-secondary">Secondary</button>&nbsp;
<button type="button" class="btn btn-outline-success">Success</button>&nbsp;
<button type="button" class="btn btn-outline-danger">Danger</button>&nbsp;
<button type="button" class="btn btn-outline-warning">Warning</button>&nbsp;
<button type="button" class="btn btn-outline-info">Info</button>&nbsp;
<button type="button" class="btn btn-outline-light">Light</button>&nbsp;
<button type="button" class="btn btn-outline-dark">Dark</button>

<button type="button" class="btn btn-grey-1">Grey 1</button>&nbsp;
<button type="button" class="btn btn-grey-2">Grey 2</button>&nbsp;
<button type="button" class="btn btn-grey-3">Grey 3</button>

<button type="button" class="btn btn-grey-1 btn-outline">Grey 1</button>&nbsp;
<button type="button" class="btn btn-grey-2 btn-outline">Grey 2</button>&nbsp;
<button type="button" class="btn btn-grey-3 btn-outline">Grey 3</button>

<button type="button" class="btn btn-grey-1 btn-hover-outline">Grey 1</button>&nbsp;
<button type="button" class="btn btn-grey-2 btn-hover-outline">Grey 2</button>&nbsp;
<button type="button" class="btn btn-grey-3 btn-hover-outline">Grey 3</button>

<button type="button" class="btn btn-brand btn-long"><span class="text">Brand</span><span class="icon"><span data-feather="check" class="rui-icon rui-icon-stroke-1_5"></span></span></button>&nbsp;
<button type="button" class="btn btn-brand btn-long"><span class="icon"><span data-feather="check" class="rui-icon rui-icon-stroke-1_5"></span></span><span class="text">Brand</span></button>&nbsp;
<button type="button" class="btn btn-brand btn-long"><span class="icon"><span data-feather="check" class="rui-icon rui-icon-stroke-1_5"></span></span></button>

<button type="button" class="btn btn-brand btn-long btn-round">Brand</button>&nbsp;
<button type="button" class="btn btn-brand btn-long">Brand</button>&nbsp;
<button type="button" class="btn btn-brand btn-uniform btn-round"><span class="icon"><span data-feather="check" class="rui-icon rui-icon-stroke-1_5"></span></span></button>&nbsp;
<button type="button" class="btn btn-brand btn-uniform"><span class="icon"><span data-feather="check" class="rui-icon rui-icon-stroke-1_5"></span></span></button>

<button type="button" class="btn btn-brand btn-lg">Large Button</button>&nbsp;
<button type="button" class="btn btn-secondary btn-lg">Large Button</button>

<button type="button" class="btn btn-brand btn-sm">Small Button</button>&nbsp;
<button type="button" class="btn btn-secondary btn-sm">Small Button</button>

<button type="button" class="btn btn-brand btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

<button type="button" class="btn btn-hover-outline btn-brand btn-round">Brand</button>&nbsp;
<button type="button" class="btn btn-hover-outline btn-brand">Brand</button>

<button type="button" class="btn btn-custom-round"><span data-feather="star" class="rui-icon rui-icon-stroke-1_5"></span></button>

<button type="button" class="btn btn-brand btn-hover-primary">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-secondary">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-success">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-danger">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-warning">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-info">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-light">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-dark">Button</button>

<button type="button" class="btn btn-brand btn-hover-outline btn-hover-primary">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-outline btn-hover-secondary">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-outline btn-hover-success">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-outline btn-hover-danger">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-outline btn-hover-warning">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-outline btn-hover-info">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-outline btn-hover-light">Button</button>&nbsp;
<button type="button" class="btn btn-brand btn-hover-outline btn-hover-dark">Button</button>

<div class="btn-group">
    <button type="button" class="btn btn-brand">Left</button>
    <button type="button" class="btn btn-brand">Middle</button>
    <button type="button" class="btn btn-brand">Right</button>
</div>&nbsp;
<div class="btn-group">
    <button type="button" class="btn btn-brand btn-long">Brand</button>
    <button type="button" class="btn btn-brand btn-uniform">
        <span data-feather="check" class="rui-icon rui-icon-stroke-1_5">
    </button>
</div>&nbsp;
<div class="btn-group">
    <button type="button" class="btn btn-brand btn-uniform">
        <span data-feather="check" class="rui-icon rui-icon-stroke-1_5">
    </button>
    <button type="button" class="btn btn-brand btn-long">Brand</button>
</div>&nbsp;
<div class="btn-group">
    <button type="button" class="btn btn-brand btn-round btn-long">Brand</button>
    <button type="button" class="btn btn-brand btn-round btn-uniform">
        <span data-feather="check" class="rui-icon rui-icon-stroke-1_5">
    </button>
</div>&nbsp;
<div class="btn-group">
    <button type="button" class="btn btn-brand btn-round btn-uniform">
        <span data-feather="check" class="rui-icon rui-icon-stroke-1_5">
    </button>
    <button type="button" class="btn btn-brand btn-round btn-long">Brand</button>
</div>

<div class="btn-group-vertical">
    <button type="button" class="btn btn-brand">Top</button>
    <button type="button" class="btn btn-brand">Middle</button>
    <button type="button" class="btn btn-brand">Bottom</button>
</div>

<button type="button" class="btn btn-brand active">Button brand</button>&nbsp;
<button type="button" class="btn btn-secondary active">Button</button>

<button type="button" class="btn btn-brand" disabled>Button brand</button>&nbsp;
<button type="button" class="btn btn-secondary" disabled>Button</button>

<button type="button" class="btn btn-brand" data-toggle="button" aria-pressed="false">Button</button>

<div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
        <input type="checkbox" checked> Checked
    </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
        <input type="radio" name="options" id="option1" checked> Active
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option2"> Radio
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option3"> Radio
    </label>
</div>