Buttons

Layout wrapper for one or more .button elements. A flex row with consistent gap, optional alignment, and an opt-in .has-addons mode that collapses the gap and shares borders so adjacent buttons read as a single segmented control.

Live

<div class="buttons">
  <button class="button">Save</button>
  <button class="button is-primary">Publish</button>
  <button class="button is-text">Cancel</button>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-buttons')
);

<div class="buttons is-centered">
  <button class="button">Cancel</button>
  <button class="button is-primary">Confirm</button>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-buttons')
);

<div class="buttons is-right">
  <button class="button">Discard</button>
  <button class="button is-primary">Save</button>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-buttons')
);

<div class="buttons has-addons">
  <button class="button">Left</button>
  <button class="button is-primary is-selected">Middle</button>
  <button class="button">Right</button>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-buttons')
);

Markup

.buttons is markup-agnostic — pass any mix of .button classes, native <button> elements, or anchor-as-button. The wrapper only owns layout (flex + gap + alignment). Button styling, sizing, and state modifiers live on the child elements; see the Button reference for the full modifier matrix.

<div class="buttons">
  <button class="button">Save</button>
  <button class="button is-primary">Publish</button>
  <button class="button is-text">Cancel</button>
</div>

Alignment

Addons mode

.has-addons turns a .buttons row into a segmented control: gap collapses to zero, the inner buttons share borders along the seam, and only the first/last children keep rounded corners on their outer inline edges. Implementation details:

• gap: 0 and flex-wrap: nowrap — the row reads as one continuous control, even at narrow widths (the consumer is expected to keep the addon group compact).
• Every child except the last gets margin-inline-end: -1px so adjacent 1px borders overlap instead of double-stacking.
• :hover, :focus, :focus-visible, :active lift the active button to z-index: 1 so its border paints fully over its neighbour, not behind it.
• Corner radii use logical properties (border-start-start-radius, border-end-end-radius, …) so the first/last visual order stays correct under dir="rtl". The radius itself reads from --kc-btn-border-radius (the Button module's runtime token) — segmented controls inherit the consumer's chosen button shape automatically.

<div class="buttons has-addons">
  <button class="button">Left</button>
  <button class="button is-primary is-selected">Middle</button>
  <button class="button">Right</button>
</div>

Pair .has-addons with .is-selected on the active child to mark the chosen segment — same hook as the Button selected state.

Variables

Override example

@use '@adnap/krysalicss/module/buttons' with (
  $gap: 0.75rem,
);

Tokens consumed

Per-button colour, size, and state tokens (e.g. --kc-primary-bg, --kc-btn-padding, --kc-focus-ring) are owned by the Button module — .buttons is layout-only.