eui documentation
  1. Components
  2. EuiToolbarSelectorComponent

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
Methods
Inputs
Outputs
HostBindings

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 ""