Action Module

The Action module provides grouped interactive controls inside an .actions container. It supports secondary, loading, rounded, disabled, and color variants, and extends the Element module.

Signature:

@mixin use-action($colors: ());

Example:

@include termeh.use-action(("primary", "indigo", "maroon"));

Module:

This module is registered as action in the presented modules.

Dependencies

Action module uses the following Termeh global var():

Component	Type	Usage	Default
gap → micro	Number	Spacing between action items	8px
radius → normal	Number	Default action border radius	null
radius → rounded	Number	Rounded action border radius	null
decorator → size	Number	Loading spinner and focus ring size	null
control → height	Number	Default action height	2.2em

---

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

Color / Variant	Usage	Default
primary	Default action background	null
primary→foreground	Default action text and spinner color	null
shade	Default focus/active outline color	null
shade→readable	Secondary action text and spinner color	null

Action Container

Container for action items: .actions

• Uses a horizontal flex layout with item gaps
• On mobile, horizontal overflow is scrollable

Modifiers

• .is-secondary → transparent background with readable text color
• .is-loading → locks the action and replaces text with a loader
• .is-rounded → applies rounded border radius
• .is-disabled → applies disabled style and disables interaction
• .is-<color> → applies a registered color variant to an .actions container

Color Scope

Apply a color to the .actions container or any parent element. Individual .action elements do not support color classes.

• .actions.is-primary
• .is-primary .actions