Knappar

Formulär motsvarar följande HTML element: knapp

Exempel

Primärknapp

<button class="button button--primary" type="button">Primärknapp</button>

Sekundärknapp

<button class="button button--secondary" type="button">Sekundärknapp</button>

Standardknapp

<button class="button button--standard" type="button">Standardknapp</button>

Primärknapp med ikon

<button class="button button--primary" type="button">
    <svg aria-hidden="true" class="icon button__icon" focusable="false">
        <use xlink:href="#f-icon-success" />
    </svg>
    <span>Primärknapp</span>
</button>

Knapp växer ifall knappens text är lång

<button class="button button--primary" type="button">
    Primärknapp med extra lång text
</button>

Inaktiv

<div class="button-group">
    <button
        class="button button--standard button-group__item"
        type="button"
        disabled
    >
        Standardknapp
    </button>
    <button
        class="button button--primary button-group__item"
        type="button"
        disabled
    >
        Primärknapp
    </button>
    <button
        class="button button--secondary button-group__item"
        type="button"
        disabled
    >
        Sekundärknapp
    </button>
    <button
        class="button button--discrete button-group__item"
        type="button"
        disabled
    >
        <svg aria-hidden="true" class="icon button__icon" focusable="false">
            <use xlink:href="#f-icon-close" /></svg
        ><span>Diskret knapp</span>
    </button>
</div>

Primärknapp Fullbredd (endast mobil)

<div class="col col--md-6 example-dotted">
    <button class="button button--primary button--full-width" type="button">
        Fullbredd
    </button>
</div>

Diskret knapp

Diskret standard knapp

<button
    class="button button--discrete"
    data-test="button-discrete"
    type="button"
>
    <svg aria-hidden="true" class="icon button__icon" focusable="false">
        <use xlink:href="#f-icon-paper-clip" /></svg
    ><span>Diskret standard</span>
</button>

Diskret svart knapp

<button class="button button--discrete button--discrete--black" type="button">
    <svg aria-hidden="true" class="icon button__icon" focusable="false">
        <use xlink:href="#f-icon-paper-clip" /></svg
    ><span>Diskret svart</span>
</button>

Diskret inverterad knapp

<div style="background-color: gray; padding: 20px">
    <button
        class="button button--discrete-inverted"
        data-test="button-discrete-inverted"
        type="button"
    >
        <svg aria-hidden="true" class="icon button__icon" focusable="false">
            <use xlink:href="#f-icon-paper-clip" /></svg
        ><span>Diskret inverterad</span>
    </button>
</div>

Diskret knapp i `button-list`

<ul style="list-style-type:none" class="button-list">
    <li>
        <button class="button button--discrete" type="button">
            <svg aria-hidden="true" class="icon button__icon" focusable="false">
                <use xlink:href="#f-icon-arrow-down" />
            </svg>
            <span>Knapp 1 i lista</span>
        </button>
    </li>
    <li>
        <button class="button button--discrete" type="button">
            <svg aria-hidden="true" class="icon button__icon" focusable="false">
                <use xlink:href="#f-icon-close" />
            </svg>
            <span>Knapp 2 i lista</span>
        </button>
    </li>
</ul>

Knapp i `button-group`

<div class="button-group">
    <button class="button button-group__item button--primary" type="button">
        <svg aria-hidden="true" class="icon button__icon" focusable="false">
            <use xlink:href="#f-icon-success" /></svg
        ><span>Knapp 1 i grupp</span>
    </button>

    <button class="button button-group__item button--secondary" type="button">
        <svg aria-hidden="true" class="icon button__icon" focusable="false">
            <use xlink:href="#f-icon-error" /></svg
        ><span>Knapp 2 i grupp</span>
    </button>
</div>

Diskret knapp i `button-group`

<div class="button-group">
    <button class="button button-group__item button--discrete" type="button">
        <svg aria-hidden="true" class="icon button__icon" focusable="false">
            <use xlink:href="#f-icon-success" /></svg
        ><span>Knapp 1 i grupp</span>
    </button>

    <button class="button button-group__item button--discrete" type="button">
        <svg aria-hidden="true" class="icon button__icon" focusable="false">
            <use xlink:href="#f-icon-error" /></svg
        ><span>Knapp 2 i grupp</span>
    </button>
</div>

Övrigt

Länkar

~~Användargränsnitt, Förvaltningsdokumentation - Startpunkt för komponent~~

~~Designriktlinjer självbetjäning~~

~~Designriktlinjer interna system~~

Källkod - Källkod för denna komponent