Buttons

Two main types of buttons are used throughout the design system - the primary button and secondary button. The default, focus, and disabled states are shown below.

---

Default States

Default shows the typical state of the buttons.

Mouse over these buttons to view the hover effect

Focus States

Disabled States

Usage

• Clickable actions
• Do not use for navigation - Use links for navigation
• Use primary buttons for main components - such as feature cards
• Use secondary buttons for subsequent components - such as additional cards
• Follow accesibility guidelines with color for foreground and background contrast in all state changes

Accessibility

Buttons must be differentiated in use from links. Links will be used for navigation, while buttons will be used for clickable actions, such as viewing a project. This distinction is made in consideration of screen readers, so that users with these devices can determine the correct meaning.

Code Snippets

Use the code format below for primary and secondary buttons, respectively. Add style in CSS stylesheet.

Primary

       

            <button type="button" class="btn btn-primary">Primary<button>

        

Secondary

      

            <button type="button" class="btn btn-secondary">Secondary<button>