Page contents Page contents Purpose Buttons help users to understand options and take actions easily. The colour and size of a button help users understand what will happen when they activate it. Buttons trigger some action, such as expanding content that was previously hidden, submitting a form, opening a dialog. Buttons can be triggered with a screen reader with ENTER, and with the SPACE key too. Note on web accessibility: Links direct users to a different location, such as a new webpage or section of the current page. With a screen reader, links are activated solely by the ENTER key; they do not respond to the SPACE key. Consequently, if a link to another page is designed as a button, the screen reader will identify it as such, leading users to attempt using the SPACE key unsuccessfully. While links can be styled to resemble buttons for emphasis, they must still be coded as links. Buttons should be used when you want a user to act (submit, cancel, delete). How to build this in the Europa Web Publishing Platform (EWPP) Links are used to direct users to other pages. Get the code and specifications Button labels should be short and clear. Try it out in the playground Examples There are four button styles with different levels of emphasis. Call to action The Call to action button (CTA) draws users' attention to the most important action on a web page. CTA buttons should only be used where your goal is to strongly suggest something that the user should do. Do not use more than one CTA button per page. If your page has a banner with a CTA button, do not include a second CTA button in the body of the page. Primary button The primary button allows the user to perform an action. Primary buttons should be used in situations where the user may want to go 'next', 'complete', 'start', etc. do not use when the action can't be undone, such as delete. Use the secondary or text button instead. do not use when the primary action is negative, such as cancel. Use the secondary button. on forms, do not use more than one primary action button Secondary button Secondary buttons are usually used as part of a group of buttons, for any actions that are less important. Typically, the default action is the primary one, such as 'submit' or 'save'. The secondary button serves as the negative action of the pair, such as 'delete,' 'cancel' or 'remove'. You can use the secondary button within a content page for a less important action. do not use the Secondary button in isolation on a form do not use for primary positive actions - submit, send, accept, apply Text button The text button is used in a web page where the action is less prominent or highlighted. It can be grouped with other buttons or placed independently. Text buttons are generally used in cards, dialogs, and against images as they minimise distraction from the main content. Make sure the button represents a less important action, such as "Show more", "Expand" or "See details". Avoid using text buttons where they would blend in with other content, for example in the middle of lists.
