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 edit" aria-hidden="true"></span>
    Primary icon button
</button>

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

<button class="button--primary has-icon-only">
    <span class="iconMdsp edit" 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 outgoingMindsphere" 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 outgoingMindsphere" 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 arrowDownExtraSmall 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 arrowDownExtraSmall 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 delete" aria-hidden="true"></span>
            Delete
        </button>
    </div>
</div>

Primary content action

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

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

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

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

<button class="button--contentAction has-icon-right">
    Primary content action w. icon right
    <span class="iconMdsp outgoingMindsphere"></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