Mixins / foldkit-mixins-ui

ButtonGroup

namespace · packages/mixins-ui/src/buttonGroup.ts:1

export * as ButtonGroup from './buttonGroup.js'

In the guides

Members

ButtonGroup.ButtonGroupSlots

const · packages/mixins-ui/src/buttonGroup.ts:12

const ButtonGroupSlots: Slots.Contract<{
  readonly root: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

A button group publishes one slot; it owns no state, messages, or bundles. The buttons stay the caller's (their labels, styles, and Messages), drawn as the group's children; the group owns only the join. It is role="group" with a name, not a segmented control: no option is pressed, nothing selects, and arrow keys stay out of it (see Segmented for that).

ButtonGroup.ButtonGroupView

interface · packages/mixins-ui/src/buttonGroup.ts:20

interface ButtonGroupView<Message = never> {
  readonly label: string
  readonly items: ReadonlyArray<Html>
  readonly style?: NamedStyle<typeof ButtonGroupSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

A button group in one call: its name, its buttons, a style for its slot, and mixins beside the style. No upstream component stands behind it.

ButtonGroup.view

function · packages/mixins-ui/src/buttonGroup.ts:30

function view<Message = never>(
  options: ButtonGroupView<Message>,
  h: HtmlBuilder<Message>,
): Html