Buttons
The .button look is applied to <button>, <a class="button"> and <input type="submit|reset|button">. Use a <button> for an action, an <a> for navigation.
Colours
A palette-family class recolours the button: .primary, .secondary, .success, .warning, .error, plus .soft (neutral). Add a family to $colors and its button variant is generated for free.
Modifiers
| Class | Effect |
|---|---|
| .outline / .ghost | Border-only / text-only. Combine with a family. |
| .xsmall / .small / .large | Change the text size, and with it the em-based padding. .xsmall and .small tighten the padding further via --jf-button-scale-modifier (0.66 / 0.8); .large leaves it at 1, so the larger type does the work on its own. |
| .expanded | Full width, block display. |
| :disabled / [disabled] | Dims and blocks pointer events (native). |
Lists and groups
- .button-list — a wrapping row of buttons with even gap spacing.
- .button-group — buttons fused into one segmented control (shared border, squared inner corners).
Overriding
- One button / a scoped rule — --jf-button-color-theme / -color-text and their -hover- pair; --jf-button-padding-x / -y; --jf-button-scale-modifier.
- Everywhere — the Sass variables below. $buttons is the selector list every rule targets; $button-base-color sets the default family.
Variables
Colour
| Name | Default | Notes |
|---|---|---|
| $buttons | .button, a.button, button, [type=submit], [type=reset], [type=button] | The selector stack every button rule targets. |
| $button-base-color | primary | Palette family for an unmodified button. |
| $button-hover-value | role-shade(emphasis) (700) | Shade a button moves to on hover / focus. Set 500 to drop the hover shift entirely — that also removes the .ghost underline treatment. |
Size & typography
| Name | Default | Notes |
|---|---|---|
| $button-padding-x | 1.25em | Inline padding → --jf-button-padding-x. In em, so it tracks the button's font size. |
| $button-padding-y | 0.75em | Block padding → --jf-button-padding-y. |
| $button-font-size | token(font-size-base) | Default text size. |
| $button-font-size-xsmall | token(font-size-xs) | Text size for .xsmall. |
| $button-font-size-small | token(font-size-sm) | Text size for .small. |
| $button-font-size-large | token(font-size-md) | Text size for .large. |
| $button-font-family | token(font-secondary) | Button typeface. |
| $button-font-weight | get-weight(bold) | Button text weight. |
| $button-line-height | get-leading(snug) | Button line height. |
| $button-text-transform | none | text-transform — set uppercase for a caps button. |
Border & states
| Name | Default | Notes |
|---|---|---|
| $button-border-radius | token(radius-md) | Corner radius. .button-group squares off the inner corners. |
| $button-border-width | token(border-width) | Border width. The border is always solid and takes the button's theme colour, so it only reads on .outline. |
| $button-disabled-opacity | 0.65 | Opacity of a :disabled button. |
| $button-list-button-margin | get-space(2xs) | Half the .button-list gap — the gap is twice this. |
Custom properties
| Name | Default | Notes |
|---|---|---|
| --jf-button-color-theme | the family's 500 | Fill and border colour. Family / .soft modifiers repoint it; .outline and .ghost read it as the text colour instead. |
| --jf-button-color-text | its --jf-color-on-* | Text colour, contrast-picked against the fill. |
| --jf-button-hover-color-theme | the family at $button-hover-value | Fill and border on hover / focus. Not emitted when $button-hover-value is 500. |
| --jf-button-hover-color-text | its --jf-color-on-* | Text colour on hover / focus. |
| --jf-button-padding-x | $button-padding-x | Inline padding, multiplied by the scale modifier below. |
| --jf-button-padding-y | $button-padding-y | Block padding, multiplied by the scale modifier below. |
| --jf-button-scale-modifier | 1 | Multiplier applied to both paddings. .xsmall sets 0.66, .small 0.8, .large 1. |