SegmentedButtonGroup

Usage

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

<SegmentedButtonGroup
  label="Options"
  items="[]"
  active="active"
  size="md"
  fullWidth="false"
/>

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

Props and attributes

Slots

This component does not declare a slot.

Events

• click

Source contract

Installed source: components/SegmentedButtonGroup.wrn

component SegmentedButtonGroup {
  props {
    label = "Options"
    items = []
    active = ""
    size = "md"
    fullWidth = false
    class = ""
  }

  state current = active

  view {
        <div
      class="wire-segmented-group {fullWidth ? 'wire-segmented-group--full' : ''} wire-segmented-group--{size} {class}"
      role="tablist"
      aria-label="{label}"
    >
      {#each items as item, index}
        <button
          type="button"
          role="tab"
          aria-selected="{current === item.value}"
          disabled="{item.disabled}"
          class="wire-segmented-group__button"
          class:wire-segmented-group__button--active='{current === item.value}'
          @click="current = item.value"
        >
          {#if item.icon}
            <span class="wire-segmented-group__icon {item.icon}" aria-hidden="true">
        </span>
          {/if}

          <span class="wire-segmented-group__label">{item.label}</span>

          {#if item.badge}
            <span class="wire-segmented-group__badge">{item.badge}</span>
          {/if}
        </button>
      {:empty}
        <span class="wire-segmented-group__empty">No options available</span>
      {/each}
    </div>
    }
}