Primary brand buttons
Characteristics
Primary Brand buttons are in UBS red or in ghost-style with a black frame and transparent or white background. They have an animation which transforms the chevron to an arrow when hovering.
Usage
- Brand buttons are used to indicate the start from a marketing or advertising context towards more information or process page.
- Always use a short and precise description to label the button, so that a user knows what it will do.
- If possible use the red one only once on a page.
- Please don’t show the link opens in new window as we should avoid.
- Chevrons for
- internal link
- external link
- download link
Secondary buttons
Characteristics
These buttons are ghost-style with a black frame and a transparent or white background or text-style with a bold text and an animation which transforms the red chevron to an arrow when hovering.
Usage
Use them standalone or in combination when you have already one red primary button on the page.
Always use a short and precise description to label the button, so that a user knows what it will do.
Action buttons
Characteristics
These buttons are either red, black or ghost-style with a black frame and a transparent or white background. The different colors allow to making it outstanding in context. The button text can be combined with an icon from the library.
Usage
- Action buttons announce an action like: send a form or download a whitepaper. The red button should be used most. For modal dialogues use black or ghost style.
- Always use a short and precise description to label the button, so that a user knows what it will do.
- Use only the ghost button for icons
How it works
How it works
- Buttons consist of a shape with a title, optional text and an optional icon.
- The width is defined by the text length.
- The call-to-action button can be left-aligned (recommended default), centered or right aligned.
Please note
Please note
- Use buttons sparingly and for the most important actions only. Use links for further references.
- If possible, use only the button title. The possible label text should not be used.
- Alternatives for Buttons and CTAs with similar functionality:
- Please make sure that the text in the button is not too long, otherwise the text will be cut off in the mobile view.
If possible, do not use more than 40 characters (with spaces). - Don't use the red button in dialogues but instead the styles 'ghost' or ' black'.
Reference for publisher
Button component in authoring mode
Button component in authoring mode
Ensure Accessibility
Always indicate the target clearly. For example, "Find out more" is not clear enough. It is possible to insert an additional "hidden text" to the link text that will be read by a screen reader. Find this option in the "Link" tab. But don't repeat the text that is visible in the button.