Badges

<button type="button" class="button button--white">
    Button
    <span class="badge badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white">
    <span class="badge badge--left">1</span>
    Button
</button>

Copy Code

<button type="button" class="button button--white">
    Button
    <span class="badge badge--primary-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white">
    Button
    <span class="badge badge--secondary-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white">
    Button
    <span class="badge badge--tertiary-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white">
    Button
    <span class="badge badge--error-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white">
    Button
    <span class="badge badge--warning-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white">
    Button
    <span class="badge badge--success-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white">
    Button
    <span class="badge badge--info-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--primary-color">
    Button
    <span class="badge badge--white-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white button--smallest">
    Button
    <span class="badge badge--smallest badge--primary-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white button--smaller">
    Button
    <span class="badge badge--smaller badge--primary-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white button--small">
    Button
    <span class="badge badge--small badge--primary-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white">
    Button
    <span class="badge badge--primary-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white button--large">
    Button
    <span class="badge badge--large badge--primary-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white button--larger">
    Button
    <span class="badge badge--larger badge--primary-color badge--right">1</span>
</button>

Copy Code

<button type="button" class="button button--white button--largest">
    Button
    <span class="badge badge--largest badge--primary-color badge--right">1</span>
</button>

Copy Code