Button

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

Primary button



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

<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>

<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>
<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>

Secondary button


<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>

<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>
<a class="button button--secondary" href="#">Secondary link button</a>
<a class="button button--secondary is-disabled" href="#">Secondary link button, disabled</a>

Ghost button


<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>

<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>
<a class="button button--ghost" href="#">Ghost link button</a>
<a class="button button--ghost is-disabled" href="#">Ghost link button, disabled</a>

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 is-disabled">
        <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>

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

    <button class="button--secondary has-icon-only">
        <span class="iconMdsp edit" 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 is-disabled">
        <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>

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

    <button class="button--secondary has-icon-only">
        <span class="iconMdsp edit" 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 is-disabled">
        <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>

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

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

    <a class="button button--secondary has-icon-only">
        <span class="iconMdsp linkDissolve" aria-hidden="true"></span>
    </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 is-disabled">
        <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>

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

    <button class="button--ghost has-icon-only">
        <span class="iconMdsp duplicate" 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 is-disabled">
        <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>

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

    <button class="button--ghost has-icon-only">
        <span class="iconMdsp clipboard" 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 is-disabled">
        <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