Button Module

The Button module provides customizable action elements with support for color variants, sizes, shapes, loading, and disabled states. It extends the Element module. It can be grouped using the . buttons container for consistent spacing.

Primary

Icon

Loading

Simple CTA

Disabled

Indigo

Icon

Loading

Simple CTA

Disabled

Cherry

Icon

Loading

Simple CTA

Disabled

Signature:

@mixin use-button($colors: (), $sizes: ());

Example:

@include termeh.use-button(("primary", "green"), ("small", "large"));

Module:

This module is registered as button in the presented modules.

Dependencies

Button module uses the following Termeh global var():

Component	Type	Usage	Default
gap → micro	Number	Spacing between button container items	8px
radius → normal	Number	Default border radius	null
radius → rounded	Number	Rounded button border radius	null
decorator → size	Color	Loading spinner thickness	null
control → height	Number	Default button height	2.2em

---

Button module uses the following Termeh color() and variant():

Color / Variant	Usage	Default
shade	Default focus/active outline color	error
shade → readable	Default text/icon color	null
shade → light	Default button background	null
shade → light-active	Default hover background	null

Button Container

Container for buttons: .buttons

Modifiers

• .is-cta → fills remaining space in .buttons container
• .is-simple → applies minimal style, inherits text color
• .is-light → applies light background variant
• .is-rounded → applies rounded border-radius
• .is-loading → applies loading state
• .is-disabled → applies disabled state
• .is-<size> → applies a registered size as button size
• .is-<color> → applies a registered color as accent color