Government of Spain Dintel, Sistema de Diseño Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support
Components Buttons

Buttons

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with the pages in various ways. The label of the buttons expresses what action will occur when the user interacts with them.

Preview

Figma

Uses

A screen can contain more than one button. We must show a single high emphasis button (primary button), which may be accompanied by other lower emphasis buttons (secondary or neutral) that perform less important actions. The emphasis level of a button helps determine its appearance.

When to use

Communicate the actions that users can perform and allow them to interact with the page. Each page must have a main button and the remaining calls to action must be represented as buttons of lower emphasis. Navigate through a sequence of screens. Act as a call to action (CTA).

When not to use

Do not use buttons as navigation elements. Instead, use links when the desired action is to take the user to a new page.

Behaviour

Types of buttons by use

Display of the button component for primary use
Primary
Display of the button component for secudary use
Secondary
Display of the button component for tertiary use
Tertiary
Display of the button component for neutral use
Neutral

Types of buttons by size

Display of the button component with size S
S
Display of the button component with size M
M
Display of the button component with size L
L
Display of the button component with size XL
XL

Types of buttons by content

Display of the button component with text
Text
Display of the button component with icon + text
Icon + Text
Display of the component button with text + icon
Text + Icon
Display of the button component with icon
Icon

Types of buttons by state

Display of the button component in active state
Active
Display of the button component in hover state
Hover
Display of the button component in focused state
Focus
Display of the button component in the pressed state
Pressed
Display of the button component in a disabled state
Disabled

States for chatbot button

Display of the chatbot button component in default state
Default
Display of the chatbot button component in hover state
Hover
Display of the chatbot button component in focused state
Focus
Display of the chatbot button component in the pressed state
Pressed
Display of the chatbot button component in deactivated state
Disabled

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

If the button is disabled, the disabled property is used, which transmits this information correctly to assistive technologies. When the button only has an icon, it has a title attribute that allows you to read an explanatory text of the button without this text being visible to the user, worse if for assistive technologies.
Funded by the European Union NextGenerationEU, opens in new tab Recovery Plan, Transformation and Resilience, opens in new tab Digital Spain, opens in new tab Support Accessibility Web Map Cookies Policy

This website uses its own and third-party cookies to offer a better service. If you continue browsing, we consider that you accept its use.