https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=912%3A377
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=912%3A416
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=912%3A1041
Variants on Light | Bootstrap class name |
---|---|
Brand Primary |
|
Brand Secondary |
|
Primary |
|
Secondary |
|
Tertiary | Not implemented yet |
Variants on Dark | Bootstrap class name |
---|---|
Brand Primary |
|
Brand Secondary |
|
Primary |
|
Secondary |
|
Tertiary | Not implemented yet |
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.