Button

Buttons help you to choose the right action for editing and submitting data and components in your web application.

Primary button



Primary link button Primary link button, disabled w. class
<button class="button--primary">Primary button</button>
<button class="button--primary" disabled>Primary button, disabled w. attribute</button>
<button class="button--primary is-disabled">Primary button, disabled w. class</button>

<input class="button--primary" type="submit" value="Submit input" />

<a class="button button--primary" href="#">Primary link button</a>
<a class="button button--primary is-disabled" href="#">Primary link button, disabled w. class</a>

<button class="button--primary">
    <span class="iconMdsp addCircle" aria-hidden="true"></span>Primary icon button
</button>

<button class="button--primary has-icon-right">
    Primary icon button<span class="iconMdsp outgoing" aria-hidden="true"></span>
</button>

<button class="button--primary has-icon-only">
    <span class="iconMdsp addCircle" aria-hidden="true"></span>
</button>

Secondary button


Secondary link button Secondary link button, disabled
<button class="button--secondary">Secondary button</button>
<button class="button--secondary" disabled>Secondary button, disabled</button>
<button class="button--secondary is-disabled">Secondary button, disabled</button>

<a class="button button--secondary" href="#">Secondary link button</a>
<a class="button button--secondary is-disabled" href="#">Secondary link button, disabled</a>

<button class="button--secondary">
    <span class="iconMdsp edit" aria-hidden="true"></span>Secondary icon button
</button>

<button class="button--secondary has-icon-right">
    Secondary icon button<span class="iconMdsp outgoing" aria-hidden="true"></span>
</button>

<button class="button--secondary has-icon-only">
    <span class="iconMdsp edit" aria-hidden="true"></span>
</button>

Ghost button


Ghost link button Ghost link button, disabled
<button class="button--ghost">Ghost button</button>
<button class="button--ghost" disabled>Ghost button, disabled</button>
<button class="button--ghost is-disabled">Ghost button, disabled</button>

<a class="button button--ghost" href="#">Ghost link button</a>
<a class="button button--ghost is-disabled" href="#">Ghost link button, disabled</a>

<button class="button--ghost">
    <span class="iconMdsp edit" aria-hidden="true"></span>Ghost icon button
</button>

<button class="button--ghost has-icon-right">
    Ghost icon button<span class="iconMdsp outgoing" aria-hidden="true"></span>
</button>

<button class="button--ghost has-icon-only">
    <span class="iconMdsp edit" aria-hidden="true"></span>
</button>

Split button

<div class="buttonSplitWrapper">
    <div class="buttonGroup">
        <button class="button--secondary">
            <span class="iconMdsp edit" aria-hidden="true"></span>
            Edit
        </button>
        <button class="button--secondary has-icon-only">
            <span class="iconMdsp more black" aria-hidden="true"></span>
        </button>
    </div>
    <div class="buttonSplit">
        <button class="button--split">
            <span class="iconMdsp duplicate" aria-hidden="true"></span>
            Copy
        </button>
        <button class="button--split">
            <span class="iconMdsp move" aria-hidden="true"></span>
            Move
        </button>
        <button class="button--split">
            <span class="iconMdsp delete" aria-hidden="true"></span>
            Delete
        </button>
    </div>
</div>

<div class="buttonSplitWrapper">
    <div class="buttonGroup">
        <button class="button--secondary">
            <span class="iconMdsp edit" aria-hidden="true"></span>
            Edit
        </button>
        <button class="button--secondary has-icon-only is-activated">
            <span class="iconMdsp more black" aria-hidden="true"></span>
        </button>
    </div>
    <div class="buttonSplit is-activated">
        <button class="button--split">
            <span class="iconMdsp duplicate" aria-hidden="true"></span>
            Copy
        </button>
        <button class="button--split">
            <span class="iconMdsp move" aria-hidden="true"></span>
            Move
        </button>
        <button class="button--split">
            <span class="iconMdsp globalSettings" aria-hidden="true"></span>
            Web
        </button>
        <button class="button--split">
            <span class="iconMdsp delete" aria-hidden="true"></span>
            Delete
        </button>
    </div>
</div>

Primary content action

Primary content action link Primary content action link, disabled
<button class="button--primaryContentAction">
    <span class="iconMdsp addCircle black"></span>
    Primary content action
</button>

<a class="button button--primaryContentAction" href="#">
    <span class="iconMdsp addCircle black"></span>Primary content action link
</a>

<button class="button--primaryContentAction is-disabled">
    <span class="iconMdsp addCircle black"></span>Primary content action, disabled
</button>

<a class="button button--primaryContentAction is-disabled" href="#">
    <span class="iconMdsp share black"></span>Primary content action link, disabled
</a>

<button class="button--primaryContentAction has-icon-right">
    Primary content action w. icon right<span class="iconMdsp share black"></span>
</button>

Secondary content action

Secondary content action link Secondary content action link, disabled
<button class="button--secondaryContentAction">
    <span class="iconMdsp addCircle"></span>Secondary content action
</button>

<a class="button button--secondaryContentAction" href="#">
    <span class="iconMdsp addCircle"></span>Secondary content action link
</a>

<button class="button--secondaryContentAction is-disabled">
    <span class="iconMdsp addCircle"></span>Secondary content action, disabled
</button>

<a class="button button--secondaryContentAction is-disabled" href="#">
    <span class="iconMdsp addCircle"></span>Secondary content action link, disabled
</a>

<button class="button--secondaryContentAction has-icon-right">
    Secondary content action w. icon right<span class="iconMdsp outgoingExtSmall"></span>
</button>

Button group

<div class="buttonGroup">
    <button class="button--secondary has-icon-only">
        <span class="iconMdsp listBullet" aria-hidden="true"></span>
    </button>

    <button class="button--secondary has-icon-only">
        <span class="iconMdsp apps black" aria-hidden="true"></span>
    </button>

    <button class="button--secondary has-icon-only">
        <span class="iconMdsp locationMarker" aria-hidden="true"></span>
    </button>

    <button class="button--secondary has-icon-only">
        <span class="iconMdsp map" aria-hidden="true"></span>
    </button>
</div>

<div class="buttonGroup">
    <button class="button--secondary has-icon-only">
        <span class="iconMdsp listBullet" aria-hidden="true"></span>
    </button>

    <button class="button--secondary has-icon-only">
        <span class="iconMdsp apps black" aria-hidden="true"></span>
    </button>

    <button class="button--secondary has-icon-only">
        <span class="iconMdsp locationMarker" aria-hidden="true"></span>
    </button>

    <button class="button--secondary has-icon-only is-activated">
        <span class="iconMdsp map" aria-hidden="true"></span>
    </button>
</div>

<div class="buttonGroup">
    <a class="button button--secondary has-icon-only">
        <span class="iconMdsp listBullet" aria-hidden="true"></span>
    </a>

    <a class="button button--secondary has-icon-only">
        <span class="iconMdsp apps black" aria-hidden="true"></span>
    </a>

    <a class="button button--secondary">
        Some other title
    </a>

    <a class="button button--secondary is-activated">
        Some title
    </a>
</div>

Button group ghost

<div class="buttonGroup">
    <button class="button--ghost has-icon-only">
        <span class="iconMdsp listBullet" aria-hidden="true"></span>
    </button>

    <button class="button--ghost has-icon-only">
        <span class="iconMdsp apps black" aria-hidden="true"></span>
    </button>

    <button class="button--ghost has-icon-only">
        <span class="iconMdsp locationMarker" aria-hidden="true"></span>
    </button>

    <button class="button--ghost has-icon-only">
        <span class="iconMdsp map" aria-hidden="true"></span>
    </button>
</div>

<div class="buttonGroup">
    <button class="button--ghost has-icon-only">
        <span class="iconMdsp listBullet" aria-hidden="true"></span>
    </button>

    <button class="button--ghost has-icon-only">
        <span class="iconMdsp apps black" aria-hidden="true"></span>
    </button>

    <button class="button--ghost has-icon-only is-activated">
        <span class="iconMdsp locationMarker" aria-hidden="true"></span>
    </button>

    <button class="button--ghost has-icon-only">
        <span class="iconMdsp map" aria-hidden="true"></span>
    </button>
</div>

<div class="buttonGroup">
    <a class="button button--ghost has-icon-only">
        <span class="iconMdsp listBullet" aria-hidden="true"></span>
    </a>

    <a class="button button--ghost has-icon-only">
        <span class="iconMdsp apps black" aria-hidden="true"></span>
    </a>

    <a class="button button--ghost">
        Some other title
    </a>

    <a class="button button--ghost is-activated">
        Some title
    </a>
</div>

Usage

ElementClassDescription
button, a.button .is-disabled Visually disables all kind of buttons, the 'disabled' attribute functionally disables the button.
button, a.button .has-icon-right Indicates that the button has an icon on the right side of the text.
button, a.button .has-icon-only Indicates that the button contains only an icon.
.buttonSplitWrapper button.has-icon-only .is-activated Visually indicates the icon button that the menu with the additional list of actions is open.
.buttonSplitWrapper .buttonSplit .is-activated Displays the menu with the additional list of actions. Make sure that ther is more than 1 button.
.button-group button, .button-group a.button .is-activated Visually labels the currently active button of a button group.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top