Button

    Overview

    When to use

    The icon element should be used if there is no room for a full descriptive text label or if a general function could be described with a familiar, abstract image.

    When to consider an alternative

    If the mapped function is too complex to find a widely recognized and descriptive image to sell its use. Or if the icon has only a decorative character.


    Component

    The button component should always be used if the user has to be guided to specific actions. It's important to use the button component with care. Especially the primary button should be used as less as possible, so the page has a clear CTA for an explicit user journey.

    Default

    1024px
    375px768px1400px

    Primary

    1024px
    375px768px1400px

    Invert

    1024px
    375px768px1400px
    1024px
    375px768px1400px

    Flag

    1024px
    375px768px1400px

    Disabled

    1024px
    375px768px1400px

    Small

    1024px
    375px768px1400px

    Icon right

    1024px
    375px768px1400px

    Icon left

    1024px
    375px768px1400px

    Properties

    PropertyTypeRequiredDefault
    primaryBoolfalse-
    linkBoolfalse-
    hrefStringfalse-
    invertBoolfalse-
    iconStringfalse-
    iconLeftBoolfalse-
    disabledBoolfalse-
    flagStringfalse-
    toggleStringfalse-
    smallBoolfalse-
    utilClassNamesStringfalse-