Working with buttons
- Todd McGill
Buttons are specialized links that come in several style variations:
| Style | Appearance | Notes |
|---|---|---|
| Default |  | |
| Primary |  | UCI brand blue |
| Secondary |  | UCI brand gold |
Success |  | |
| Info |  | |
| Warning |  | |
| Danger |  | |
| Link |  | Margin and padding of a button without the background or border |
Defining images in the templates
The following datadef form elements are are reused in many places in the 2015 templates when buttons are to be included in the page content:
| Datadef element | Description |
|---|---|
| ... > Link | Refer to 'Working with links'. |
| ... > Style | How the button is styled. Refer to above table. |
| ... > Text | Only appears if the link associated with the button has 'Auto generate link text' set to 'no'. |
| ... > Text > Hidden before | Hidden text inserted before the displayed button text. |
| ... > Text > Displayed | Text displayed in the button. |
| ... > Text > Hidden after | Hidden text inserted after the displayed button text. |
| ... > Set internationalization | Refer to 'Internationalization'. |
Making button links accessible
Commonly, the text displayed in a button is terse and is only given meaning by the surrounding content. For example, a button link displaying the text 'More', does not convey any information about the link destination on it's own. To provide additional meaning to button links, use the 'Hidden before' and 'Hidden after' datadef elements. The value of these elements is used in conjunction with the value of 'Displayed' to form a more informative link phrase that make sense when the link is examined out of context.
Accessible button examples
| Datdef values | Link text displayed on screen | Link text spoken by screen readers |
|---|---|---|
| 'Learn' | 'Learn more about visiting our campus.' |
| 'Calendar' | 'UCI campus calendar' |