Buttons
Edit the 📁 custom-style/_buttons.scss file to create your custom buttons.
🔍 On this page:
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:
| Class | Description |
|---|---|
.btn |
basic style of all button components |
.btn--primary |
main call-to-action button style |
.btn--accent |
used to draw particular attention to the button (e.g., destructive actions) |
.btn--subtle |
subtle style variation, used for secondary actions or in combo with primary/accent button. |
.btn--disabled |
used for feedback, to identify a button that is disabled |
.btn--sm |
button size small |
.btn--md |
button size medium |
.btn--lg |
button size large |
.btn--icon |
button containing (only) an icon |
Fork the pen below or use our Buttons Editor to create your custom buttons:
Fixed Size Buttons #
If you want to create fixed-sized button variations (e.g., a button with a height equal to 40px), you can create class modifiers that set the desired size:
/* 👇 example: custom height utility classes */
.height-30, .height-40, .height-50 {
height: var(--height);
&.btn, &.form-control {
line-height: var(--height);
padding-top: 0;
padding-bottom: 0;
}
}
.height-30 { --height: 30px; }
.height-40 { --height: 40px; }
.height-50 { --height: 50px; }
/* 👇 example: custom width utility classes */
.width-40, .width-120 {
width: var(--width);
&.btn {
padding-left: 0;
padding-right: 0;
}
}
.width-40 { --width: 40px; }
.width-120 { --width: 120px; }Here's a live example:
Button Editor #
The Buttons Editor allows you to design and export a system of buttons in the browser. The generated code should be pasted into CodyFrame's 📁 custom-style/_buttons.scss file.