Government of Spain Logo DINTEL Design System Logo Standardized Design of Electronic Procedures Home First steps First steps What is DINTEL? Designers Developers Resources Frequently Asked Questions Foundations Foundations Color Typography Box shadow Spacing Grid Border Border radius Iconography Illustrations Animations Accessibility Design tokens Writing guidelines Data visualization Interface elements Interface elements Modules Templates Components Updates Contact
Interface elements 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 pages in a variety of ways. Button labels express what action will occur when the user interacts with them.

Preview

Preview of component button

Uses

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

How to use

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

How 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

Visualization of component button for primary use

Primary

Visualization of component button for secondary use

Secondary

Visualization of component button for tertiary use

Tertiary

Visualization of component button for neutral use

Neutral

Types of buttons by size

Visualization of component button with size S

S

Visualization of component button with size M

M

Visualization of component button with size L

L

Visualization of component button with size XL

XL

Types of buttons by content

Visualization of component button with text

Text

Visualization of component button with icon + text

Icon + Text

Visualization of component button with text + icon

Text + Icon

Visualization of component button with icon

Icon

Types of buttons by states

Visualization of button in active state

Active

Visualization of button in hover state

Hover

Visualization of button in focus state

Focus

Visualization of button in pressed state

Pressed

Visualization of button in disabled state

Disabled

States of chatbot button

Visualization of chatbot button in default state

Default

Visualization of chatbot button in hover state

Hover

Visualization of chatbot button in focus state

Focus

Visualization of chatbot button in pressed state

Pressed

Visualization of chatbot button in disabled state

Disabled

Accessibility

This component has been validated to comply with the accessibility requirements of UNE-EN 301549:2022 which encompasses the criteria of WCAG 2.1 (AA), however, changes to content and styles may affect accessibility compliance. Be sure to review and follow the guidelines in this section when updating or adding new content or styling to this component.

If the button is disabled, the disabled property is used, which transmits this information correctly to assistive technologies. When the button has only an icon, it has a title attribute that allows to read an explanatory text of the button without this text being visible to the user, but visible to assistive technologies.

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

 NextGenerationEU European Union Funding Logo Transformation and Resiliency Recovery Plan Logo Spain digital logo Legal notice Accessibility Cookies policy Contact Sitemap