File

packages/components/layout/eui-toolbar/toolbar-environment/toolbar-environment.component.ts

Description

Environment indicator component for toolbar placement, displaying the current application environment. Provides visual distinction between different deployment environments (dev, test, production, etc.) to prevent user confusion. Content is projected via ng-content allowing custom environment labels and styling. Typically displays text like "Development", "Testing", "Staging" with distinct background colors. Used within eui-toolbar for consistent environment indication across the application.

<eui-app>
  <eui-app-toolbar>
    <eui-toolbar>
      <eui-toolbar-environment>DEV</eui-toolbar-environment>
      <eui-toolbar-mega-menu [items]="menuItems"></eui-toolbar-mega-menu>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>

Accessibility

• Environment text readable by screen readers
• Provides critical deployment context
• Visual distinction prevents accidental actions
• Text content should be concise and clear

Notes

• Must be used within eui-toolbar for proper layout
• Positioned at start of toolbar (leftmost)
• Content projected via ng-content
• Common values: "DEV", "TEST", "ACC", "PROD"
• Styling typically uses distinct background colors per environment
• Simpler alternative to eui-header-environment for toolbar layouts
• No integration with EuiAppShellService
• Use when toolbar is primary navigation instead of header

<ng-content />