>menu UVA, School of Medicine Portal

Buttons

Toggle Index

For button label guidelines, refer to Typography.

For button placement guidelines, refer to Forms.

Tonal Buttons

  • All buttons in VMED will use tonal blue buttons with minimal exceptions.
  • Primary: call to action
  • Alternative: secondary action
  • Ancillary/Tertiary: action that might not be the primary intended action (Example: Lookup) 
                    
                        <button class="default">Primary</button>
                        <button class="default outline">Alternative</button>
                        <button class="default tonal">Ancillary</button>

Standard Buttons

  • Primary buttons are solid blue and use the standard default button class. Examples: Search, Save, Submit, and New
  • If the final step in a process results in two potential Primary buttons, the one that completes the process is solid green using the success button class. Example: Complete
  • A destructive action is solid red using the danger button class. Example: Delete
  • If a Primary button is disabled, it should use the disabled button class.
                    
                        <button class="default">Default</button>
                        <button class="success">Success</button>
                        <button class="danger">Danger</button>
                        <button class="disabled">Disabled</button>

Outline Buttons

  • Alternative/Secondary buttons have a blue outline and use the default outline button class. Examples: Clear and Cancel
                    
                        <button class="default outline">Default</button>
                        <button class="success outline">Success</button>
                        <button class="danger outline">Danger</button>
                        <button class="disabled outline">Disabled</button>
  • Do not have a fixed width like standard and outline buttons.
Link Button Outline Link Button Success Link Button Danger Link Button Disabled 

            
            <a class="button default outline">Link Button Outline</a>
            <a class="button success">Link Button Outline</a>
            <a class="button danger">Link Button Outline</a>
            <a class="button disabled outline">Link Button Outline</a>

Small Buttons

                    
                        <button class="default small">New</button>
                        <button class="default small tonal">Edit</button>
                        <button class="default small danger">Delete</button>

To view the list of icons, refer to Icons.

  • Inline buttons in lists should be icons (if available). Examples: Edit, View, Delete
  • Icons should match the primary color.
  • Icons should have a title attribute with the name of the action inside.
save view swords edit trash-2 

            
            <a class="icon success" href="#" title="Save"><i data-feather=“save”>save</i></a>
            <a class="icon" href="#" title="View"><i data-feather=“external-link”>view</i></a>
            <a class="icon warning" href="#" title="Swords"><i icon-name=“swords”>swords</i></a>
            <a class="icon" href="#" title="Edit"><i data-feather=“edit”>edit</i></a>
            <a class="icon danger" href="#" title="Delete"><i data-feather=“trash-2”>trash-2</i></a>

Buttons with Icons

  • You can use buttons with icons to make things more intuitive.
  • If a standard button contains an icon, that icon should be to the left of the text and should be consistent across all applications. 
                    
                        <button class="default"><i data-feather="plus">plus</i> New</button>
                        <button class="default tonal"><i data-feather="edit">edit</i> Edit</button>
                        <button class="default danger"><i data-feather="trash-2">trash-2</i> Delete</button>