Button

A button is an element the user can select to take an action.

Demo

<div class="l-grid" style="--grid--basis: 200px;">
    {{#each this.links}}
        <div>{{> eds-c-button linkUrl=this.linkUrl template=this.template text=this.text variant=this.variant size=this.size}}</div>
    {{/each}}
</div>

When to use this component

Use buttons to communicate actions users can take to interact with the product or service. For example, making a payment or submitting information.

Each page should have only 1 primary button, and any other calls to action should use lower emphasis buttons.

When not to use this component

Do not use buttons for navigation. Instead, use a link to take a user to a new page.

How it works

First, import the button styles, then include the template in your project.

@import '@springernature/elements/components/eds-c-button';

Options

Name	Description	Required
id	Use it to connect the markup with Javascript (for example attach event handler to a button)
linkUrl	href attribute for links that look like buttons
text	Copy for the button	✅
icon	Icon for the button path to and svg on the file system or an id in the svg sprite
type	Type attribute for buttons (for example `button` or `submit`)
template	Define the type of button (`eds-c-buttonPlain`, `eds-c-buttonIconLeft`, `eds-c-buttonIconRight`)	✅
variant	Define the variant of button (`primary`, `secondary`, `tertiary`)	✅
size	Define the size of button (`small`, nothing for the default behaviour)
dataAttributes	Use it to define any data attributes that you need in the component HTML
jsHook	Use it to connect the markup with Javascript (for example attach event handler to a button)
jsHookValue	Use it to provide a value to the hook (for example `data-expander-target="#user"`)

Variants

There are 3 button variants: primary, secondary and tertiary. The design of each signals its place in the hierarchy to the user.
Use the variants consistently across products and services.

`primary`

For the main call to action on a page. Primary buttons should only appear once on each screen (not including the application header, modal dialog, or side panel). This is to make it clear what the main action is and draw attention to it.

`secondary`

For secondary actions on each page. Secondary buttons can be used with a primary button.

As part of a pair, the secondary button’s function is to perform the negative action, for example “Cancel” or “Back”.

If you are using secondary buttons on their own, use them for actions that have lower importance than the primary action.

`tertiary`

For less prominent actions. Use tertiary buttons for sub tasks on a page where there is already a primary button for
the main action.

Button Sizes

Default

Use as primary page actions and other standalone actions.

Small

Use when there is not enough vertical space for the default.

Template

Find a configurable template in the eds-c-button's component folder.

Help improve this page

If you’ve got a question, idea or suggestion about how to improve this component or guidance,
post in the #ask-elements Slack channel.