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
Hidden before: (empty) Displayed: 'Learn' Hidden after: 'more about visiting our campus.'	'Learn'	'Learn more about visiting our campus.'
Hidden before: 'UCI campus' Displayed: 'Calendar' Hidden after: (empty)	'Calendar'	'UCI campus calendar'

Browser not supported