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



    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



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


    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>


    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>

    buttons on info messages

    Info messages have a blue background which means buttons have a colour clash. So we have and special info button.

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


    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>


    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>



    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>


    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>



    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>


    The default button size should generally be used everywhere.

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


    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 class="button-group">
        <button class="button">fourth</button>
        <button class="button">fifth</button>
        <button class="button">six</button>

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

    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
            <ul class="nav__dropdown__menu">
                    <a href="#0">
                        United Kingdom
                    <a href="#0">
                        United states of America