### File

`packages/components/layout/eui-toolbar/toolbar-selector/toolbar-selector.component.ts`

### Description

Toolbar selector component providing a clickable button with icon and label for triggering selection actions. Typically used for context switching, workspace selection, or opening dropdown menus in the toolbar. Integrates with EuiAppShellService for responsive behavior and theme coordination. Supports disabled state and emits click events for parent components to handle selection logic.

Example :

    <eui-app>
      <eui-app-toolbar>
        <eui-toolbar>
          <eui-toolbar-selector
            label="Select Workspace"
            iconSvgName="chevron-down:outline"
            [euiDisabled]="false"
            (selectorClick)="onSelectorClick()">
          </eui-toolbar-selector>
        </eui-toolbar>
      </eui-app-toolbar>
    </eui-app>

Example :

    onSelectorClick(): void {
      // Open dropdown or handle selection
      console.log('Selector clicked');
    }

### Accessibility

- Button keyboard accessible
- Disabled state prevents interaction
- Label provides context
- Icon enhances visual affordance
- Focus visible for keyboard navigation
- Click events properly handled

### Notes

- Must be used within eui-toolbar for proper layout
- Positioned in toolbar content area
- label for button text (optional)
- iconSvgName for button icon (optional)
- euiDisabled to disable button (default: false)
- selectorClick event emits true on click
- Common use: workspace/context switching
- Often paired with dropdown menus
- Integrates with EuiAppShellService
- Responsive behavior inherited from toolbar
- Button styling follows EUI button patterns

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
selector | `eui-toolbar-selector`
imports | `AsyncPipe` `EUI_BUTTON` `EUI_ICON` `EUI_ICON_BUTTON`
templateUrl | `./toolbar-selector.component.html`
styleUrl | `./toolbar-selector.component.scss`

### Index

###### Properties
class
###### Methods
onClick
###### Inputs
euiDisabled iconSvgName label
###### Outputs
selectorClick
###### HostBindings
class

### Inputs

euiDisabled
Type : `boolean`
Default value : `false`
Disables the selector button preventing user interaction. When true, button is visually disabled and click events are not emitted.

iconSvgName
Type : `string`
SVG icon name displayed on the selector button. Follows EUI icon naming convention (e.g., 'chevron-down:outline'). Optional.

label
Type : `string`
Text label displayed on the selector button. Provides context for what the selector controls or represents. Optional.

### Outputs

selectorClick
Type : `EventEmitter<boolean>`
Emitted when the selector button is clicked. Payload: boolean - always emits true to indicate click occurred Triggered when user clicks the selector button and it is not disabled.

### HostBindings

class
Type : `string`
Default value : `'eui-toolbar-selector'`

### Methods

onClick
`onClick()`
Returns : `void`

### Properties

class
Type : `string`
Default value : `'eui-toolbar-selector'`
Decorators : `@HostBinding()`

# results matching ""

# No results matching ""