Buttons

Block

        block button
    

        block button
    

			<div class="grid">
    <div class="column-6">
        <a class="btn btn--block btn--beta btn--large" href="#link">block button</a>
    </div>
    <div class="column-6">
        <a class="btn btn--block btn--beta btn--large" href="#link">block button</a>
    </div>
</div>
		

Dropdown

        Active
Inactive
Concept
Published
Unpublished

        Remove filters
    

			<div class="btn-dropdown btn-dropdown--action">
    <button type="button" class="btn-dropdown__action btn btn--medium btn--alpha btn--bordered icon icon--filter icon--margin-beta-before" data-btn-dropdown-toggle>Filter</button>
    <div class="btn-dropdown__dropdown">
        <ul class="btn-dropdown__list btn-dropdown__list--border-bottom btn-dropdown__list--padding">
            <li class="btn-dropdown__item"><input name="checkbox-active" type="checkbox" id="checkbox-active"><label for="checkbox-active">Active</label></li>
            <li class="btn-dropdown__item"><input name="checkbox-inactive" type="checkbox" id="checkbox-inactive"><label for="checkbox-inactive">Inactive</label></li>
            <li class="btn-dropdown__item"><input name="checkbox-concept" type="checkbox" id="checkbox-concept"><label for="checkbox-concept">Concept</label></li>
            <li class="btn-dropdown__item"><input name="checkbox-published" type="checkbox" id="checkbox-published"><label for="checkbox-published">Published</label></li>
            <li class="btn-dropdown__item"><input name="checkbox-notpublished" type="checkbox" id="checkbox-notpublished"><label for="checkbox-notpublished">Unpublished</label></li>
        </ul>
        <a class="btn btn--mask btn--medium btn--block" data-status-clear-checkboxes>Remove filters</a>
    </div>
</div>
		

Ghost

Add more colors in the settings file under "buttons" if you need to.

		black

			<a class="btn btn--ghost btn--dark btn--small" href="#link">black</a>

Group

These work with the button classes so you can use those to change color, size is controlled with specific pagination padding.

Default group

    ‹
    1
    2
    3
    4
    5
    ...
    23
    ›

			<div class="btn-container">
    <a class="btn btn--alpha" href="#link">&lsaquo;</a>
    <a class="btn btn--alpha" href="#link">1</a>
    <a class="btn btn--alpha" href="#link">2</a>
    <a class="btn btn--alpha" href="#link">3</a>
    <a class="btn btn--alpha" href="#link">4</a>
    <a class="btn btn--alpha" href="#link">5</a>
    <a class="btn btn--divider">...</a>
    <a class="btn btn--alpha" href="#link">23</a>
    <a class="btn btn--alpha" href="#link">&rsaquo;</a>
</div>
		

Centered group

    ‹
    1
    2
    3
    4
    5
    ...
    23
    ›

			<div class="btn-container btn-container--center">
    <a class="btn btn--alpha" href="#link">&lsaquo;</a>
    <a class="btn btn--alpha" href="#link">1</a>
    <a class="btn btn--alpha" href="#link">2</a>
    <a class="btn btn--alpha" href="#link">3</a>
    <a class="btn btn--alpha" href="#link">4</a>
    <a class="btn btn--alpha" href="#link">5</a>
    <a class="btn btn--divider">...</a>
    <a class="btn btn--alpha" href="#link">23</a>
    <a class="btn btn--alpha" href="#link">&rsaquo;</a>
</div>
		

Right group

    ‹
    1
    2
    3
    4
    5
    ...
    23
    ›

			<div class="btn-container btn-container--right">
    <a class="btn btn--alpha" href="#link">&lsaquo;</a>
    <a class="btn btn--alpha" href="#link">1</a>
    <a class="btn btn--alpha" href="#link">2</a>
    <a class="btn btn--alpha" href="#link">3</a>
    <a class="btn btn--alpha" href="#link">4</a>
    <a class="btn btn--alpha" href="#link">5</a>
    <a class="btn btn--divider">...</a>
    <a class="btn btn--alpha" href="#link">23</a>
    <a class="btn btn--alpha" href="#link">&rsaquo;</a>
</div>
		

Button group

    ‹
1
2
3
4
5
...
23
›


			<div class="btn-container">
    <ul class="btn-group btn-group--inline">
        <li><a class="btn btn--alpha" href="#link">&lsaquo;</a></li>
        <li><a class="btn btn--alpha" href="#link">1</a></li>
        <li><a class="btn btn--alpha" href="#link">2</a></li>
        <li><a class="btn btn--alpha" href="#link">3</a></li>
        <li><a class="btn btn--alpha" href="#link">4</a></li>
        <li><a class="btn btn--alpha" href="#link">5</a></li>
        <li><a class="btn btn--divider">...</a></li>
        <li><a class="btn btn--alpha" href="#link">23</a></li>
        <li><a class="btn btn--alpha" href="#link">&rsaquo;</a></li>
    </ul>
</div>
		

Centered button group

    ‹
1
2
3
4
5
...
23
›


			<div class="btn-container btn-container--center">
    <ul class="btn-group btn-group--inline">
        <li><a class="btn btn--alpha" href="#link">&lsaquo;</a></li>
        <li><a class="btn btn--alpha" href="#link">1</a></li>
        <li><a class="btn btn--alpha" href="#link">2</a></li>
        <li><a class="btn btn--alpha" href="#link">3</a></li>
        <li><a class="btn btn--alpha" href="#link">4</a></li>
        <li><a class="btn btn--alpha" href="#link">5</a></li>
        <li><a class="btn btn--divider">...</a></li>
        <li><a class="btn btn--alpha" href="#link">23</a></li>
        <li><a class="btn btn--alpha" href="#link">&rsaquo;</a></li>
    </ul>
</div>
		

Right button group

    ‹
1
2
3
4
5
...
23
›


			<div class="btn-container btn-container--right">
    <ul class="btn-group btn-group--inline">
        <li><a class="btn btn--alpha" href="#link">&lsaquo;</a></li>
        <li><a class="btn btn--alpha" href="#link">1</a></li>
        <li><a class="btn btn--alpha" href="#link">2</a></li>
        <li><a class="btn btn--alpha" href="#link">3</a></li>
        <li><a class="btn btn--alpha" href="#link">4</a></li>
        <li><a class="btn btn--alpha" href="#link">5</a></li>
        <li><a class="btn btn--divider">...</a></li>
        <li><a class="btn btn--alpha" href="#link">23</a></li>
        <li><a class="btn btn--alpha" href="#link">&rsaquo;</a></li>
    </ul>
</div>
		

Block button group

		button
button
button
button


	

			<ul class="btn-group btn-group--block">
    <li><a class="btn btn--beta btn--medium" href="#link">button</a></li>
    <li><a class="btn btn--beta btn--medium" href="#link">button</a></li>
    <li><a class="btn btn--beta btn--medium" href="#link">button</a></li>
    <li><a class="btn btn--beta btn--medium" href="#link">button</a></li>
</ul>
		

Inline

These work with the button classes so you can use those to change color and size.

		button
button
button
button


	

			<ul class="btn-group btn-group--inline">
    <li><a class="btn btn--beta btn--medium" href="#link">button</a></li>
    <li><a class="btn btn--beta btn--medium" href="#link">button</a></li>
    <li><a class="btn btn--beta btn--medium" href="#link">button</a></li>
    <li><a class="btn btn--beta btn--medium" href="#link">button</a></li>
</ul>
		

Mask

		button medium

			<a class="btn btn--mask btn--medium" href="#link">button medium</a>

Reset button

Commonly used for triggers. For example a navigation trigger

		
			<button class="reset-button">Button</button>

Sizes

All size related stuff can be edited in the settings file.

		button small
button medium
button large

	

			<a class="btn btn--beta btn--small" href="#link">button small</a>
<a class="btn btn--beta btn--medium" href="#link">button medium</a>
<a class="btn btn--beta btn--large" href="#link">button large</a>
		

Split

        Deactivate
Concept

        Delete
    

			<div class="btn-dropdown">
    <button type="button" class="btn-dropdown__action btn btn--medium btn--alpha btn--bordered icon icon--cog icon--margin-alpha">Activate</button>
    <button type="button" class="btn-dropdown__toggle btn btn--medium btn--alpha btn--bordered" data-btn-dropdown-toggle aria-haspopup="true" aria-expanded="false"></button>
    <div class="btn-dropdown__dropdown" data-btn-dropdown="allowPropagation">
        <ul class="btn-dropdown__list btn-dropdown__list--border-bottom" data-btn-dropdown="allowPropagation">
            <li><a class="btn-dropdown__link" href="#link">Deactivate</a></li>
            <li><a class="btn-dropdown__link" href="#link">Concept</a></li>
        </ul>
        <a class="btn btn--mask btn--medium btn--block" href="#link">Delete</a>
    </div>
</div>
		

Styles

Add more colors in the settings file under "buttons" if you need to.

		alpha
beta
gamma
delta
epsilon

	

			<a class="btn btn--alpha btn--small" href="#link">alpha</a>
<a class="btn btn--beta btn--small" href="#link">beta</a>
<a class="btn btn--gamma btn--small" href="#link">gamma</a>
<a class="btn btn--delta btn--small" href="#link">delta</a>
<a class="btn btn--epsilon btn--small" href="#link">epsilon</a>
		