These button classes can be applied to both <button> and <a> elements. <button> elements should be used to trigger in-page functionality while <a> elements should be used for linking to pages.
Primary
Use the primary button style for the primary task or call to action of your page.
Code
<!-- Primary -->
<!-- Use the <button> tag if the element will be used to trigger in-page functionality -->
<button class="cui btn-sm primary">Small primary button <span class="cicon-angle-right right" aria-hidden="true"></span></button>
<button class="cui btn-md primary">Medium primary button <span class="cicon-angle-right right" aria-hidden="true"></span></button>
<button class="cui btn-lg primary">Large primary button <span class="cicon-angle-right right" aria-hidden="true"></span></button>
<button class="cui btn-xl primary">Extra large primary button <span class="cicon-angle-right right" aria-hidden="true"></span></button>
<!-- Use the <a> tag if the element is a link to a different page or section -->
<a class="cui btn-sm primary" href="page.html">Small primary link <span class="cicon-angle-right right" aria-hidden="true"></span></a>
<a class="cui btn-md primary" href="page.html">Medium primary link <span class="cicon-angle-right right" aria-hidden="true"></span></a>
<a class="cui btn-lg primary" href="page.html">Large primary link <span class="cicon-angle-right right" aria-hidden="true"></span></a>
<a class="cui btn-xl primary" href="page.html">Extra large primary link <span class="cicon-angle-right right" aria-hidden="true"></span></a>
Usage
Consider what your page is about and the main action you want your user to take. The primary button should be used for directing your user to the main action on the page. This will help your user to understand what your page is about.
Try to feature this primary button prominently within your page layout.
If you find yourself using multiple instances of the primary on a page this is a sign you may have too many tasks for the user. Instead of drawing more attention to user tasks, multiple primary buttons on a page adds additional cognitive load on to the user
Utility
Use utility button style for all other actions on a page.
There are two variations available: solid and transparent.
Solid
Transparent
Code
<!-- Solid utility -->
<!-- Use the <button> tag if the element will be used to trigger in-page functionality -->
<button class="cui btn-sm utility-btn-solid">Small solid utility button</button>
<button class="cui btn-md utility-btn-solid">Medium solid utility button</button>
<button class="cui btn-lg utility-btn-solid">Large solid utility button</button>
<button class="cui btn-xl utility-btn-solid">Extra large solid utility button</button>
<!-- Use the <a> tag if the element is a link to a different page or section -->
<a class="cui btn-sm utility-btn-solid" href="page.html">Small solid utility link</a>
<a class="cui btn-md utility-btn-solid" href="page.html">Medium solid utility link</a>
<a class="cui btn-lg utility-btn-solid" href="page.html">Large solid utility link</a>
<a class="cui btn-xl utility-btn-solid" href="page.html">Extra large solid utility link</a>
<!-- Transparent utility -->
<!-- Use the <button> tag if the element will be used to trigger in-page functionality -->
<button class="cui btn-sm utility-btn">Small utility button</button>
<button class="cui btn-md utility-btn">Medium utility button</button>
<button class="cui btn-lg utility-btn">Large utility button</button>
<button class="cui btn-xl utility-btn">Extra large utility button</button>
<!-- Use the <a> tag if the element is a link to a different page or section -->
<a class="cui btn-sm utility-btn" href="page.html">Small utility link</a>
<a class="cui btn-md utility-btn" href="page.html">Medium utility link</a>
<a class="cui btn-lg utility-btn" href="page.html">Large utility link</a>
<a class="cui btn-xl utility-btn" href="page.html">Extra large utility link</a>
Usage
Utility buttons are used for all other actions on a page. An example of this usage is to print the web page or download a PDF file.
An easy way to decide on using a utility button is if it is for something a user needs to do to complete their tasks, but it is not the reason they came to the content page (i.e. printing a web page).
The dark grey colour is designed to indicate a possible action, but not compete visually with the primary button on the page.
Example usage
The utility button can be used for non-primary actions on a page.
Secondary / text buttons can be used for miscellaneous actions on a page or as a secondary action that goes along with the primary button.
Code
<!-- Secondary / text -->
<!-- Use the <button> tag if the element will be used to trigger in-page functionality -->
<button class="cui btn-sm primary-text">Small primary text button</button>
<button class="cui btn-md primary-text">Medium primary text button</button>
<button class="cui btn-lg primary-text">Large primary text button</button>
<button class="cui btn-xl primary-text">Extra large primary text button</button>
<button class="cui btn-sm secondary-text">Small secondary text button</button>
<button class="cui btn-md secondary-text">Medium secondary text button</button>
<button class="cui btn-lg secondary-text">Large secondary text button</button>
<button class="cui btn-xl secondary-text">Extra large secondary text button</button>
<!-- Use the <a> tag if the element is a link to a different page or section -->
<a class="cui btn-sm primary-text" href="page.html">Small primary text link</a>
<a class="cui btn-md primary-text" href="page.html">Medium primary text link</a>
<a class="cui btn-lg primary-text" href="page.html">Large primary text link</a>
<a class="cui btn-xl primary-text" href="page.html">Extra large primary text link</a>
<a class="cui btn-sm primary-text" href="page.html">Small secondary text button</a>
<a class="cui btn-md primary-text" href="page.html">Medium secondary text button</a>
<a class="cui btn-lg primary-text" href="page.html">Large secondary text button</a>
<a class="cui btn-xl primary-text" href="page.html">Extra large secondary text button</a>
Usage
Example usage
The secondary / text button can be used alongside the primary button.
To disable a button, it is recommended to apply the disabled attribute to the button. The disabled attribute can be applied to the primary, utility, and secondary / text buttons. The styles for disabled buttons will be the same regardless of the base styling class.
The disabled attribute should only be used for <button> tags. It is not recommended to disable link <a> tags.
The disabled attribute can be used to prevent a user from clicking the button until some other condition has been met (for example: selecting a checkbox, filling in an input, etc.). Once the condition has been met, JavaScript can be used to remove the disabled attribute rendering the button usable.
The disabled class or attribute should only be used for <button> tags. It is not recommended to disable link <a> tags.
Include the aria-disabled="true" attribute on disabled buttons to indicate the disabled state to assistive technologies.
Buttons with icons
Buttons with icon on left. Apply the class left on the cicon element for spacing between the text and the icon.
Buttons with icon on right. Apply the class right on the cicon element for spacing between the text and the icon.
Code
<!-- Icon on left -->
<!-- Use any button size: btn-sm, btn-md, btn-lg, btn-xl -->
<!-- Use the <button> tag if the element will be used to trigger in-page functionality -->
<button class="cui btn-md primary"><span class="cicon-angle-left left" aria-hidden="true"></span>Icon on left</button>
<!-- Use the <a> tag if the element is a link to a different page or section -->
<a class="cui btn-md primary" href="page.html"><span class="cicon-angle-left left" aria-hidden="true"></span>Icon on left</a>
<!-- Icon on right -->
<!-- Use any button size: btn-sm, btn-md, btn-lg, btn-xl -->
<!-- Use the <button> tag if the element will be used to trigger in-page functionality -->
<button class="cui btn-md primary">Icon on right<span class="cicon-angle-right right" aria-hidden="true"></span></button>
<!-- Use the <a> tag if the element is a link to a different page or section -->
<a class="cui btn-md primary" href="page.html">Icon on right<span class="cicon-angle-left left" aria-hidden="true"></span></a>
Mega buttons can be used for vertical display of icons or illustratiive images with text. The graphical element can be positioned either above or below the button text.
Both the primary or utility button styles may be used.
Mega buttons with City of Calgary icons (cicons)
The icons are set to their maximum size of 3.2rem (32px).
Primary style
Utility style
Mega buttons with SVG illustrative images
For larger graphics, use the SVG illustrative images designed by Creative Services. The images are set to their mimimum size of 6.4rem (64px). Read more information on SVG image usage.
As the illustrative images are for decorative purposes only, the alt attribute should be empty: alt="". Images with empty alt attributes will be ignored by assistive technologies.
Primary style
Utility style
Code
<!-- Ensure the alt attribute for the illustrative image is empty: alt="" -->
<!-- Image on top -->
<!-- Use the <button> tag if the element will be used to trigger in-page functionality -->
<button class="cui btn-mega primary">
<img class="cimg top" src="image.svg" alt="">
<span class="text">Image on top</span>
</button>
<!-- Use the <a> tag if the element is a link to a different page or section -->
<a class="cui btn-mega primary" href="page.html">
<img class="cimg top" src="image.svg" alt="">
<span class="text">Image on top</span>
</a>
<!-- Image on bottom -->
<!-- Use the <button> tag if the element will be used to trigger in-page functionality -->
<button class="cui btn-mega primary">
<span class="text">Image on bottom</span>
<img class="cimg bottom" src="image.svg" alt="">
</button>
<!-- Use the <a> tag if the element is a link to a different page or section -->
<a class="cui btn-mega primary" href="page.html">
<span class="text">Image on bottom</span>
<img class="cimg bottom" src="image.svg" alt="">
</a>
Fluid width buttons
Add the btn-fluid class to create fluid-width buttons that span the full width of the parent.
Code
<!-- Use the <button> tag if the element will be used to trigger in-page functionality -->
<button class="cui btn-md primary btn-fluid">Fluid width</button>
<button class="cui btn-md secondary-text btn-fluid">Fluid width</button>
<button class="cui btn-md utility-btn btn-fluid">Fluid width</button>
<button class="cui btn-mega primary btn-fluid">
<span class="text">Fluid width</span>
<img class="cimg bottom" src="../svg-images/images/bus-o.svg" alt="">
</button>
<!-- Use the <a> tag if the element is a link to a different page or section -->
<a class="cui btn-md primary btn-fluid" href="page.html">Fluid width</a>
<a class="cui btn-md secondary-text btn-fluid" href="page.html">Fluid width</a>
<a class="cui btn-md utility-btn btn-fluid" href="page.html">Fluid width</a>
<a class="cui btn-mega primary btn-fluid" href="page.html">
<span class="text">Fluid width</span>
<img class="cimg bottom" src="../svg-images/images/bus-o.svg" alt="">
</a>
