Pistachio the front end framework and pattern library for graze.com

contents:


    buttons

    Buttons are constructed by applying one or more modifying classes to the standard button and will work on standard links as well as button elements.

    • Buttons should not be used within a paragraph, use standard links instead
    • Buttons should always be used to submit a form
    • Primary buttons should only be used sparingly to highlight the most favoured actions on a page

    types

    default

    <button class="button">default</button>

    primary

    A primary button should be used to highlight the primary or most favoured action on a page. If there is only one main call to action on a page, it should be a primary button. There should rarely be more than one primary action on any given page.

    <button class="button button--primary">primary</button>

    secondary

    A secondary button should be used to highlight the secondary action of a page or where there is a repeated, but important action to perform. For example, multiple "add to cart" buttons on a product listing page.

    <button class="button button--secondary">secondary</button>

    continue

    The continue button should be used as part of a user journey to move to the next stage and should always be primary.

    <button class="button button--primary button--continue">continue</button>

    back

    The back button should be used as part of a user journey to move back to the previous stage.

    <button class="button button--back">back</button>

    states

    disabled

    The disabled attribute should be used on buttons to make them visually disabled. For links, the .button--disabled class should be used as links do not have a disabled attribute.

    disabled link

    <button class="button" disabled>disabled button</button>
    <a class="button button--disabled" href="#">disabled link</a>

    disabled link

    <button class="button button--primary" disabled>disabled button</button>
    <a class="button button--primary button--disabled" href="#">disabled link</a>

    disabled link

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

    active

    Makes the button appear active.

    <button class="button button--primary button--active">active button</button>
    <button class="button button--secondary button--active">active button</button>
    <button class="button button--active">active button</button>

    sizes

    small

    Small buttons should be used sparingly to minimise their visual impact on a content heavy page, or as a way to reduce the importance of an action.

    <button class="button button--sm">small</button>

    default

    The default button size should generally be used everywhere.

    <button class="button">default</button>

    large

    Large buttons should be used sparingly to draw attention to a certain action and should generally only be applied to primary buttons

    <button class="button button--lg">large</button>

    full width block buttons

    Full width block buttons will fill the width of their containing element.

    <button class="button button--block">block</button>

    responsive block buttons

    It's possible to have buttons which are only full width below certain breakpoints.

    <button class="button button--block-xs">block-xs</button>
    <button class="button button--block-sm">block-sm</button>

    button icons

    Icons can be added to buttons to give context.

    • Icons in buttons should always be on the left
    • Never use an icon on it's own in a button and always provide a text description.
    • Be sure to use icons consistently by referencing the icons list
    <button class="button button--primary"><i class="fa fa-user"></i> my account</button>
    <button class="button"><i class="fa fa-facebook-square"></i> share on facebook</button>

    button groups

    Button groups are intended for use as a visual way of grouping lots of related actions.

    A button group should not be used for presenting a collection of links to other pages and you should instead use an unordered list or have your links formatted inside a paragraph of text.

    A button group should not be used for pagination in place of the pagination module.

    <div class="button-group">
        <button class="button">first</button>
        <button class="button">second</button>
        <button class="button">third</button>
    </div>
    <div class="button-group">
        <button class="button">fourth</button>
        <button class="button">fifth</button>
        <button class="button">six</button>
    </div>

    If your button group wraps on smaller screens, consider using the responsive block button classes.

    <div class="button-group button--block-xs">
        <button class="button button--block-xs">first</button>
        <button class="button button--block-xs">second</button>
        <button class="button button--block-xs">third</button>
        <button class="button button--block-xs">fourth</button>
        <button class="button button--block-xs">fifth</button>
    </div>
    <div class="button-group button--block-xs">
        <button class="button button--block-xs">sixth</button>
        <button class="button button--block-xs">seventh</button>
        <button class="button button--block-xs">eigth</button>
        <button class="button button--block-xs">ninth</button>
        <button class="button button--block-xs">tenth</button>
    </div>

    button dropdowns

    A button can be a dropdown list. This should never replace a select element in a form, but is suitable for small collections of options or links. More information can be found in the dropdown list documentation.

    <ul class="nav nav--dropdown nav--dropdown-inline" data-p-module="dropDown">
        <li class="nav__dropdown">
            <button class="button button--dropdown">
                switch country
            </button>
            <ul class="nav__dropdown__menu">
                <li>
                    <a href="#0">
                        United Kingdom
                    </a>
                </li>
                <li>
                    <a href="#0">
                        United states of America
                    </a>
                </li>
            </ul>
        </li>
    </ul>