---
url: /api/css/button-set.md
---
# CSS: button-set

`.instui-button-set` — A seamed (flush, zero-gap) row of buttons, with only its outer two corners rounded.

Its own chained modifiers (`-color-*`, `-size-*`, `-shape-*`, `-toggle`, `-condensed`,
`-without-background`, `-without-border`, `-display-block`) set a default for every child
`.instui-button` that doesn't carry its own modifier in that same category — a button's own
modifier class always wins over the group's default. `-icon-*` is always per-button; it's
never read from the group. Deprecated button aliases (`-ghost`, `-color-primary-inverse`)
aren't supported as group-level modifiers — use their canonical replacements
(`-color-tertiary`, `-on-color`) instead.

## Usage

```css
@import "@pantoken/plugin-custom-components/custom-components.css";
```

## Examples

```html
<div class="instui-button-set -size-sm -toggle">
  <button class="instui-button">Left</button>
  <button class="instui-button">Right</button>
</div>
```

### Per-button override

```html
<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">Cancel</button>
  <button class="instui-button -color-primary -icon-checkmark">Confirm</button>
</div>
```

## Structure

```text
.instui-button-set
  button (component, 1..n)
```

```mermaid
flowchart TD
  n0[".instui-button-set"]:::cssdoc-root
  n1(["button"]):::cssdoc-component
  n0 -->|1..n| n1
  click n1 "/api/css/button.md"
  classDef cssdoc-root fill:#eef2ff,stroke:#6366f1,color:#1e1b4b;
  classDef cssdoc-part fill:#f8fafc,stroke:#94a3b8,color:#0f172a;
  classDef cssdoc-slot fill:#f0fdf4,stroke:#4ade80,color:#14532d;
  classDef cssdoc-component fill:#fff7ed,stroke:#fb923c,color:#7c2d12;
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.-color-ai` | Default every unmodified child to the AI gradient treatment. |
| `.-color-ai-secondary` | Default every unmodified child to the lower-emphasis AI treatment. |
| `.-color-danger` | Default every unmodified child to the destructive color. |
| `.-color-primary` | Default every unmodified child to the primary color. |
| `.-color-secondary` | Default every unmodified child to the secondary color. |
| `.-color-success` | Default every unmodified child to the success color. |
| `.-color-tertiary` | Default every unmodified child to the tertiary (text-style) color. |
| `.-condensed` | Default every unmodified child to tighter padding. |
| `.-display-block` | Lay every unmodified child out full-width. |
| `.-on-color` | Default every unmodified child for placement on a coloured surface. |
| `.-shape-circle` | Default every unmodified child to a round icon button. |
| `.-shape-square` | Default every unmodified child to a square icon button. |
| `.-size-lg` | Default every unmodified child to large. |
| `.-size-md` | (default) medium size. |
| `.-size-sm` | Default every unmodified child to small. |
| `.-toggle` | Default every unmodified child to the pressed-state toggle treatment. |
| `.-without-background` | Default every unmodified child to no fill. |
| `.-without-border` | Default every unmodified child to no border. |

## Pseudo-elements

| Pseudo-element | Description |
| --- | --- |
| `::after` | — |
| `::before` | — |

## States

| State | Description |
| --- | --- |
| `[aria-disabled="true"]` | — |
| `[aria-pressed="true"]` | — |
| `:disabled` | — |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-border-width-md` | `<length>` | `0.125rem` |
| `--instui-border-width-sm` | `<length>` | `0.0625rem` |
| `--instui-color-background-interactive-action-ai-bottom-gradient-active` | `<color>` | `#01626E` |
| `--instui-color-background-interactive-action-ai-bottom-gradient-base` | `<color>` | `#027887` |
| `--instui-color-background-interactive-action-ai-bottom-gradient-hover` | `<color>` | `#00828E` |
| `--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient` | `<color>` | `light-dark(#CFF0F6, #00424A)` |
| `--instui-color-background-interactive-action-ai-secondary-active-top-gradient` | `<color>` | `light-dark(#F3E5F7, #522965)` |
| `--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient` | `<color>` | `light-dark(#CFF0F6, #00424A)` |
| `--instui-color-background-interactive-action-ai-secondary-hover-top-gradient` | `<color>` | `light-dark(#F3E5F7, #522965)` |
| `--instui-color-background-interactive-action-ai-top-gradient-active` | `<color>` | `#793F93` |
| `--instui-color-background-interactive-action-ai-top-gradient-base` | `<color>` | `#944FB3` |
| `--instui-color-background-interactive-action-ai-top-gradient-hover` | `<color>` | `#9E58BD` |
| `--instui-color-background-interactive-action-destructive-active` | `<color>` | `#AE161B` |
| `--instui-color-background-interactive-action-destructive-base` | `<color>` | `#CF1F24` |
| `--instui-color-background-interactive-action-destructive-hover` | `<color>` | `#E62429` |
| `--instui-color-background-interactive-action-primary-active` | `<color>` | `light-dark(#061C30, #D5E2F6)` |
| `--instui-color-background-interactive-action-primary-base` | `<color>` | `light-dark(#1D354F, #EEF4FD)` |
| `--instui-color-background-interactive-action-primary-hover` | `<color>` | `light-dark(#234465, #ffffff)` |
| `--instui-color-background-interactive-action-secondary-active` | `<color>` | `light-dark(#44709f26, #2E5177)` |
| `--instui-color-background-interactive-action-success-base` | `<color>` | `#037D37` |
| `--instui-color-background-interactive-action-success-hover` | `<color>` | `#03893D` |
| `--instui-color-background-muted` | `<color>` | `light-dark(#F2F4F5, #273540)` |
| `--instui-color-stroke-interactive-action-ai-bottom-gradient-active` | `<color>` | `light-dark(#01626E, #02717E)` |
| `--instui-color-stroke-interactive-action-ai-bottom-gradient-base` | `<color>` | `#027887` |
| `--instui-color-stroke-interactive-action-ai-bottom-gradient-hover` | `<color>` | `#00828E` |
| `--instui-color-stroke-interactive-action-ai-top-gradient-active` | `<color>` | `light-dark(#793F93, #8A49A7)` |
| `--instui-color-stroke-interactive-action-ai-top-gradient-base` | `<color>` | `#944FB3` |
| `--instui-color-stroke-interactive-action-ai-top-gradient-hover` | `<color>` | `#9E58BD` |
| `--instui-color-stroke-interactive-action-primary-active` | `<color>` | `light-dark(#061C30, #D5E2F6)` |
| `--instui-color-stroke-interactive-action-primary-base` | `<color>` | `light-dark(#1D354F, #EEF4FD)` |
| `--instui-color-stroke-interactive-action-primary-hover` | `<color>` | `light-dark(#234465, #ffffff)` |
| `--instui-color-stroke-interactive-action-secondary-active` | `<color>` | `light-dark(#44709f00, #2E5177)` |
| `--instui-color-text-interactive-action-ai-active` | `<color>` | `#ffffff` |
| `--instui-color-text-interactive-action-ai-base` | `<color>` | `#ffffff` |
| `--instui-color-text-interactive-action-ai-hover` | `<color>` | `#ffffff` |
| `--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base` | `<color>` | `light-dark(#027887, #3CC0D4)` |
| `--instui-color-text-interactive-action-ai-secondary-top-gradient-base` | `<color>` | `light-dark(#944FB3, #CAA1D9)` |
| `--instui-color-text-interactive-action-primary-base` | `<color>` | `light-dark(#ffffff, #1D354F)` |
| `--instui-color-text-interactive-action-secondary-base` | `<color>` | `light-dark(#1D354F, #ffffff)` |
| `--instui-color-text-interactive-action-status-base` | `<color>` | `#ffffff` |
| `--instui-component-base-button-ai-disabled-background-color` | `<color>` | `light-dark(#DFE1E3, #334450)` |
| `--instui-component-base-button-ai-disabled-border-color` | `<color>` | `light-dark(#DFE1E3, #334450)` |
| `--instui-component-base-button-ai-disabled-text-color` | `<color>` | `light-dark(#9EA6AD, #6A7883)` |
| `--instui-component-base-button-border-radius` | `<length>` | `0.75rem` |
| `--instui-component-base-button-large-font-size` | `<length>` | `1.125rem` |
| `--instui-component-base-button-large-height` | `<length>` | `3rem` |
| `--instui-component-base-button-large-padding-horizontal` | `<length>` | `1.25rem` |
| `--instui-component-base-button-medium-font-size` | `<length>` | `1rem` |
| `--instui-component-base-button-medium-height` | `<length>` | `2.5rem` |
| `--instui-component-base-button-medium-padding-horizontal` | `<length>` | `1rem` |
| `--instui-component-base-button-primary-color` | `<color>` | `light-dark(#ffffff, #1D354F)` |
| `--instui-component-base-button-primary-disabled-background-color` | `<color>` | `light-dark(#DFE1E3, #334450)` |
| `--instui-component-base-button-primary-disabled-border-color` | `<color>` | `light-dark(#DFE1E3, #334450)` |
| `--instui-component-base-button-primary-ghost-active-background` | `<color>` | `light-dark(#1d354f33, #eef4fd33)` |
| `--instui-component-base-button-primary-ghost-background` | `<color>` | `transparent` |
| `--instui-component-base-button-primary-ghost-border-color` | `<color>` | `light-dark(#1d354f66, #eef4fd66)` |
| `--instui-component-base-button-primary-ghost-color` | `<color>` | `light-dark(#1D354F, #EEF4FD)` |
| `--instui-component-base-button-primary-ghost-hover-background` | `<color>` | `light-dark(#1d354f1a, #eef4fd1a)` |
| `--instui-component-base-button-primary-inverse-active-background` | `<color>` | `#E2EAF7` |
| `--instui-component-base-button-primary-inverse-background` | `<color>` | `#ffffff` |
| `--instui-component-base-button-primary-inverse-border-color` | `<color>` | `#ffffff` |
| `--instui-component-base-button-primary-inverse-color` | `<color>` | `#213D5B` |
| `--instui-component-base-button-primary-inverse-hover-background` | `<color>` | `#EEF4FD` |
| `--instui-component-base-button-primary-on-color-active-border-color` | `<color>` | `#B6CCEA` |
| `--instui-component-base-button-primary-on-color-active-text-color` | `<color>` | `#213D5B` |
| `--instui-component-base-button-primary-on-color-disabled-background-color` | `<color>` | `#8D959F` |
| `--instui-component-base-button-primary-on-color-disabled-border-color` | `<color>` | `#8D959F` |
| `--instui-component-base-button-primary-on-color-disabled-text-color` | `<color>` | `#4A5B68` |
| `--instui-component-base-button-primary-on-color-hover-border-color` | `<color>` | `#D5E2F6` |
| `--instui-component-base-button-primary-on-color-hover-text-color` | `<color>` | `#213D5B` |
| `--instui-component-base-button-secondary-active-background` | `<color>` | `light-dark(#3d658f33, #6c95cc4d)` |
| `--instui-component-base-button-secondary-active-border-color` | `<color>` | `light-dark(#44709f00, #86a8d500)` |
| `--instui-component-base-button-secondary-active-text-color` | `<color>` | `light-dark(#1D354F, #ffffff)` |
| `--instui-component-base-button-secondary-background` | `<color>` | `light-dark(#44709F33, #86A8D5)` |
| `--instui-component-base-button-secondary-border-color` | `<color>` | `light-dark(#44709f00, #86a8d500)` |
| `--instui-component-base-button-secondary-color` | `<color>` | `light-dark(#1D354F, #ffffff)` |
| `--instui-component-base-button-secondary-disabled-background-color` | `<color>` | `light-dark(#DFE1E3, #334450)` |
| `--instui-component-base-button-secondary-disabled-border-color` | `<color>` | `light-dark(#DFE1E3, #334450)` |
| `--instui-component-base-button-secondary-disabled-text-color` | `<color>` | `light-dark(#9EA6AD, #6A7883)` |
| `--instui-component-base-button-secondary-hover-background` | `<color>` | `light-dark(#4d7eb333, #92b1d94d)` |
| `--instui-component-base-button-secondary-hover-border-color` | `<color>` | `light-dark(#44709f00, #86a8d500)` |
| `--instui-component-base-button-secondary-hover-text-color` | `<color>` | `light-dark(#1D354F, #ffffff)` |
| `--instui-component-base-button-small-font-size` | `<length>` | `0.875rem` |
| `--instui-component-base-button-small-height` | `<length>` | `2rem` |
| `--instui-component-base-button-small-padding-horizontal` | `<length>` | `0.75rem` |
| `--instui-component-base-button-tertiary-active-border-color` | `<color>` | `light-dark(#1d354f4d, #eef4fd4d)` |
| `--instui-component-base-button-tertiary-active-text-color` | `<color>` | `light-dark(#1D354F, #EEF4FD)` |
| `--instui-component-base-button-tertiary-disabled-border-color` | `<color>` | `light-dark(#C7CACD, #4A5B68)` |
| `--instui-component-base-button-tertiary-disabled-text-color` | `<color>` | `light-dark(#AAB0B5, #4A5B68)` |
| `--instui-component-base-button-tertiary-hover-border-color` | `<color>` | `light-dark(#1d354f33, #eef4fd33)` |
| `--instui-component-base-button-tertiary-hover-text-color` | `<color>` | `light-dark(#1D354F, #EEF4FD)` |
| `--instui-component-icon-action-ai-disabled-color` | `<color>` | `light-dark(#9EA6AD, #6A7883)` |
| `--instui-spacing-space-xs` | `<length>` | `0.25rem` |

## Subcomponents

* [button](/api/css/button.md)

## Related

* [button](/api/css/button.md) — The child control this wraps.