base component

ButtonGroup

Theme-aware, responsive button group component.

@wrnexus/ui 0.5.013 props1 slots3 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<ButtonGroup
  items="[]"
  value="value"
  size="md"
  color="primary"
  variant="default"
/>

Legacy mount name: data-component="ButtonGroup".

Props and attributes

Prop	Type	Requirement	Default
`items`	`string`	Optional	`[]`
`value`	`string`	Optional	`""`
`size`	`string`	Optional	`"md"`
`color`	`string`	Optional	`"primary"`
`variant`	`string`	Optional	`"default"`
`orientation`	`string`	Optional	`"horizontal"`
`responsive`	`boolean`	Optional	`false`
`attached`	`boolean`	Optional	`true`
`selectable`	`boolean`	Optional	`false`
`toolbar`	`boolean`	Optional	`false`
`disabled`	`boolean`	Optional	`false`
`ariaLabel`	`string`	Optional	`"Button group"`
`class`	`string`	Optional	`""`

Slots

default

Events

click
select
change

Source contract

Installed source: components/ButtonGroup.wrn

component ButtonGroup {
  props {
    @event click = function
    @event select = function
    @event change = function
    items = []
    value = ""
    size = "md"
    color = "primary"
    variant = "default"
    orientation = "horizontal"
    responsive = false
    attached = true
    selectable = false
    toolbar = false
    disabled = false
    ariaLabel = "Button group"
    class = ""
  }

  state selectedValue = value

  functions {
    function itemValue(item, index) {
      return item.value || item.label || String(index)
    }

    function selectItem(item, index) {
      previousValue = selectedValue
      nextValue = itemValue(item, index)

      $emit("select", {
        value: nextValue,
        previousValue: previousValue,
        item: item,
        index: index
      })

      if (selectable && previousValue !== nextValue) {
        selectedValue = nextValue
        $emit("change", {
          value: nextValue,
          previousValue: previousValue,
          item: item,
          index: index
        })
      }
    }
  }

  view {
        <div
      {...attrs}
      class="wire-next wire-next--button-group {class}"
      role="{toolbar ? 'toolbar' : 'group'}"
      aria-label="{ariaLabel}"
      aria-orientation="{orientation}"
      data-size="{size}"
      data-color="{color}"
      data-variant="{variant}"
      data-orientation="{orientation}"
      data-responsive="{responsive}"
      data-attached="{attached}"
      data-selectable="{selectable}"
      data-disabled="{disabled}"
    >
      {#if items}
        {#each items as item, index}
          <button
            type="{item.type || 'button'}"
            class="wire-btn wire-btn--variant-{item.variant || variant} wire-btn--color-{item.color || color} wire-btn--size-{item.size || size}"
            disabled="{disabled || item.disabled}"
            aria-label="{item.ariaLabel || item.label}"
            aria-pressed="{selectable ? (selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false') : ''}"
            data-value="{item.value || item.label || String(index)}"
            data-selected="{selectable && selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false'}"
            @click="selectItem(item, index)"
          >
            {#if item.icon}
              <span class="wire-btn__icon {item.icon}" aria-hidden="true">
        </span>
            {/if}
            <span class="wire-btn__label">{item.label}</span>
        </button>
        {/each}
      {/if}
      <slot />
        </div>
    }
}