Buttons
The buttons.scss file is a template you can use to create your buttons. It provides a starting point for creating button styles that can be tailored to your project's needs.
If you're not using SASS, use the buttons.css file.
Button component #
The .btn class includes the style applied to all the button components.
The following class modifiers can be used to create button variations:
| CSS Class | Description |
|---|---|
b{p}tn |
basic style of all button components |
b{p}tn--primary |
main call-to-action button style |
b{p}tn--accent |
used to draw particular attention to the button (e.g., destructive actions) |
b{p}tn--subtle |
subtle style variation, used for secondary actions or in combo with primary/accent button |
b{p}tn--disabled |
used for feedback, to identify a button that is disabled |
b{p}tn--icon |
button containing (only) an icon |
Here's a preview of the default buttons:
Themes #
Our smart color system ensures the default buttons look great in both light and dark mode, without requiring any additional code.
However, you can make changes based on the color theme in use if desired:
[data-theme=dark] .btn--primary {
/* ... */
}
