Button

Owned by Adam Butterworth (Deactivated)
Last updated: Jun 04, 2021
1 min read

 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=912%3A377

Variants on Light

Bootstrap class name

Variants on Light

Bootstrap class name

Brand Primary

.btn-brand

Brand Secondary

.btn-outline-brand

Primary

.btn-primary

Secondary

.btn-outline-primary

Tertiary

.btn-tertiary

 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=912%3A416

Variants on Dark

Bootstrap class name

Variants on Dark

Bootstrap class name

Brand Primary

.btn-inverse-brand
(previously .btn-brand)

Brand Secondary

.btn-inverse-outline-brand
(previously .btn-outline-light)

Primary

.btn-inverse-primary
(previously .btn-light)

Secondary

.btn-inverse-outline-primary
(previously .btn-outline-light)

Tertiary

.btn-inverse-tertiary

 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=912%3A1041

 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=912%3A1202

 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=912%3A1420

Best Practices

Avoid using multiple Primary buttons on a single screen.

Primary buttons lose their visual priority if too many are used. For actions that users may want to take, but are not the main purpose of the page prefer secondary buttons over primary buttons. Reserve Primary buttons for the most important actions users can take.