eui Documentation

Technical Documentation: elastic/eui

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (README.md) Copy Section

Elastic UI Framework

The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic.

Check out our full documentation site which contains many examples of components in the EUI framework aesthetic, and how to use them in your products. Our FAQ below covers common usage questions — for other general questions regarding EUI, check out the Discussions tab.

Frequently Asked Questions Copy Chapter

What is the Elastic UI Framework? Copy Section

The Elastic UI Framework (EUI) is a design library in use at Elastic to build React applications that need to share our branding and aesthetics. It distributes typed UI React components and static assets for use in building web layouts. Alongside the React components, we ship theme & style utilities that can be used independently on their own.

The primary goal of this library is to provide reusable UI components that can be used throughout Elastic's web products. As React components, they remove CSS from the process of building UIs. As a single source of truth, the framework allows our designers to make changes to our aesthetic directly in the code. And unit test coverage for the UI components allows us to deliver a stable "API for user interfaces".

Can I use EUI? Copy Section

Please see Elastic's licensing FAQ: I’m using EUI or Elastic Charts in my application outside of Kibana, how does this affect me?

Why is EUI open source? Copy Section

Many of Elastic's products are open source and rely upon this library to function. The Elastic UI Framework began as a folder of code in Kibana and we decided it could be used beyond that codebase. It exists as an independent library so that patterns can be shared across teams and design standards can be scaled across our organization. Since most of our products are open source, we treat this one similarly as far as public publishing and conversation even if its usage tends to focus more inward towards Elastic itself.

What is the versioning, release, and upgrade strategy? Copy Section

We use semver for versioning and use that to denote breaking changes in EUI upgrades. Traditionally we consider API changes in our prop names or existing component functionality to be a reason for a breaking change, but do not track the renaming of CSS selectors, mixins or other style changes under this same rigor.

Traditionally releases are made weekly against whatever is in the main branch and you can upgrade from NPM as you see fit.

Can I contribute to EUI? Copy Section

External contributors may only open PRs for issues labeled help wanted. See Contributing to EUI for the full policy.

What about reporting bugs and feature requests? Copy Section

Bug reports and feature requests are most welcome, but our roadmap and prioritization are driven primarily by internal Elastic usage.

Please note that in order to keep our backlog manageable and focused on tasks we intend to complete, feature requests & tech debt issues that are inactive for a year will be auto-closed (bugs will remain open if determined to be reproducible and valid).

This activity counter can be soft reset by commenting on the issue directly, but please do so mindfully. We would ask that you proactively let the EUI team know why this request matters to you or how it impacts you or your users, in order to help us prioritize accordingly.

The EUI team, like everyone else, has a finite amount of time and resources, and it is not humanly possible for us to implement every task or feature requested of us. If you want to contribute a fix, see Can I contribute to EUI?.

I have more questions! Copy Section

The EUI team has ongoing FAQs for more transient or component-specific questions. Please see the FAQ section in our GitHub discussions here.

Wiki Copy Chapter

Our wiki docs contain instructions and guidelines on multiple areas of EUI usage and development that are too detailed for an initial README. For more information, see:

• Consuming EUI
• Contributing to EUI
• Running EUI locally

License Copy Chapter

Dual-licensed under Elastic v2 and Server Side Public License, v1. See Elastic's licensing FAQ for details.

Consuming Eui README (`wiki/consuming-eui/README.md`) Copy Section

Consuming EUI

Installation Copy Chapter

To install the Elastic UI Framework into an existing project, use the yarn CLI (npm is not supported).

yarn add @elastic/eui

Note that EUI has several peerDependencies requirements that will also need to be installed if starting with a blank project.

yarn add @elastic/eui @elastic/eui-theme-borealis @elastic/datemath @emotion/react @emotion/css moment

Requirements and dependencies Copy Chapter

EUI also has moment and @elastic/datemath as dependencies itself. These are already loaded in most Elastic repos, but make sure to install them if you are starting from scratch.

What's available Copy Chapter

EUI publishes React UI components, JavaScript helpers called services, and utilities for writing Jest tests. Please refer to the Elastic UI Framework website for comprehensive info on what's available.

EUI is published through NPM as a dependency.

Components Copy Section

You can import React components from the top-level EUI module.

import {
  EuiButton,
  EuiCallOut,
  EuiPanel,
} from '@elastic/eui';

Test Copy Section

Test utilities are published from the lib/test directory.

import { findTestSubject } from '@elastic/eui/lib/test'; // Enzyme
import { findByTestSubject, render, screen } from '@elastic/eui/lib/test/rtl'; // React Testing Library

Custom styles Copy Section

EUI uses a CSS-in-JS approach for styling, specifically Emotion library. We recommend using the css function (read more here) from @emotion/react, which automatically sets the generated className and combines all passed styles into a single ruleset. To enable css concatenation, you'll need the Babel preset.

You can find more information regarding Emotion usage with EUI here.

Theming Copy Section

EUI leverages Emotion for its theming as well. As such, we require an <EuiProvider> wrapper around your application in order for various theme-related UI & UX (such as dark/light mode switching) to work as expected.

import React from 'react';

import { EuiProvider, EuiText } from '@elastic/eui';

const MyApp = () => (
  <EuiProvider>
    <EuiText><p>Hello World!</p></EuiText>
  </EuiProvider>
);

export default MyApp;

Consuming theme tokens

Using EUI's theme layer with Emotion is documented in our docs and should cover the majority of your theming needs.

import { useEuiTheme } from '@elastic/eui';
import { css } from '@emotion/react';

export default () => {
  const { euiTheme } = useEuiTheme();
  const styles = css`
    color: ${euiTheme.colors.primary};
    border: ${euiTheme.border.thin};
    padding: ${euiTheme.size.s};
  `;
  return (
    <div css={styles} />
  );
};

"Module build failed" or "Module parse failed: Unexpected token" error Copy Section

If you get an error when importing a React component, you might need to configure Webpack's resolve.mainFields to ['webpack', 'browser', 'main'] to import the components from lib instead of src. See the Webpack docs for more info.

Using the `test-env` build Copy Chapter

EUI provides a separate babel-transformed and partially mocked commonjs build for testing environments in consuming projects. The output is identical to that of lib/, but has transformed async functions and dynamic import statements, and also applies some useful mocks. This build mainly targets Kibana's Jest environment, but may be helpful for testing environments in other projects.

Mapping to the `test-env` directory Copy Section

In Kibana's Jest configuration, the moduleNameMapper option is used to resolve standard EUI import statements with test-env aliases.

moduleNameMapper: {
  '@elastic/eui$': '<rootDir>/node_modules/@elastic/eui/test-env'
}

This eliminates the need to polyfill or transform the EUI build for an environment that otherwise has no need for such processing.

Mocked component files Copy Section

Besides babel transforms, the test environment build consumes mocked component files of the type src/**/[name].testenv.*. During the build, files of the type src/**/[name].* will be replaced by those with the testenv namespace. The purpose of this mocking is to further mitigate the impacts of time- and import-dependent rendering, and simplify environment output such as test snapshots. Information on creating mock component files can be found with testing documentation.

Using the `optimize` build (Beta) Copy Chapter

The optimize output directory is an opt-in intermediate step as we work towards dedicated, formal build output for development and production environments.

When compiling with webpack, use the resolve.alias configuration to target the desired directory:

resolve: {
  alias: {
    '@elastic/eui$': '@elastic/eui/optimize/lib'
  }
}

Designated "Beta" as included babel plugins may change and the output directory is likely to be renamed.

Notable differences Copy Section

• Absence of propTypes
  • Significant bundle size decrease
  • Likely not suitable for development environments
• Runtime transforms
  • Slight bundle size decrease
  • Requires @babel/runtime be a consumer dependency

Contributing To Eui README (`wiki/contributing-to-eui/README.md`) Copy Section

Contributing to EUI

🙌 Thanks for your interest in contributing to EUI! 🙌

We welcome and encourage contributions.

However, because EUI has a large footprint in Elastic products, we must maintain a high standard of quality and due diligence for contributions. The guidance below outlines our expectations. While we'd hate to turn away any contribution, PRs that deviate from this guidance will most likely be rejected.

Who can contribute Copy Chapter

• Elastic employees — EUI is built primarily for Elastic products; maintainers prioritize internal roadmap work first. If your need isn't currently a priority, feel free to contribute the solution yourself.
• Community — Outside contributions are welcome and merged on a best-effort basis.

What to contribute Copy Chapter

External contributors may only open PRs for issues labelled help wanted. We add that label when a task fits our roadmap and it has been prepared with clear instructions.

If you are having a problem with EUI, file an issue.

If you want to contribute a fix for an issue that affects you, comment on that issue with a proposed solution. We can discuss it there. If we agree, we will add the help wanted label.

What not to contribute Copy Chapter

Unless agreed upon previously:

• Large or core roadmap work — Often handled internally so architecture, accessibility, and downstream coordination stay aligned.
• Style or design changes — These require alignment with design teams at Elastic.
• High-impact changes - Even small code changes can have a large impact on Kibana, requiring significant testing and review.

How to contribute Copy Chapter

We do not assign issues to community members. Comment on the help wanted issue before you start so others know you are working on it.

Typical change flow Copy Chapter

A typical contribution moves through these steps:

1. Set up locally — see Running EUI locally.
2. Make your changes — follow the Developing guidelines for component structure, props, refs, icons, and Emotion styles.
3. Update docs — add or update the corresponding page in packages/website per Documenting.
4. Write tests — at minimum unit tests; see Testing for the full stack.
5. Add a changelog — see Changelogs for when one is required.
6. Verify locally — run lint and the relevant test commands (see Verifying your change).
7. Open a PR — fill in the PR template and add any labels that apply.

Naming at a glance Copy Chapter

EUI uses different naming conventions for different artifacts. Full details live in the linked docs:

Pull requests Copy Chapter

• Use this wiki — Developing, Documenting, Testing.
• Keep PRs small — Prefer atomic commits and focused PRs (one concern per commit and per PR when you can).
• Review timing — We aim to respond within about a week.
• Concurrency — Please limit open PRs so review stays focused.
• Due diligence — Follow the PR template (summary, impact, screenshots, checklists, QA notes).
• Reviewers — Code ownership is defined in CODEOWNERS; the right teams will be auto-requested based on the paths you touch.
• Draft PRs — We don’t review drafts by default. When you want feedback or help, comment and ping @eui-team (same idea as the note at the top of the PR template).

Commit messages Copy Chapter

We do not enforce a commit naming convention but it's customary to use conventional commits.

PRs typically follow the pattern: [ComponentName] Short description (#PR), e.g. [EuiBanner] Adjust additional content spacing. When merging, we squash all commits and the main commit message is the PR title. The (#PR) suffix is appended automatically.

PR labels Copy Chapter

A few labels carry behavior beyond categorization:

• skip-changelog — bypasses the CI changelog check for all packages. See Changelogs for when this is acceptable.
• skip-changelog- — bypasses the check for a single package only (e.g. skip-changelog-eslint-plugin-eui).
• breaking change — required for PRs introducing breaking changes; triggers an automated comment with extra due-diligence steps for the Kibana upgrade.

Verifying your change Copy Chapter

From packages/eui (unless noted):

• yarn lint — ESLint + type checking
• yarn test-unit — Jest unit tests (add --watch while iterating)
• yarn test-cypress — Cypress component tests
• A changelog entry in packages/eui/changelogs/upcoming/.md for any user-facing change — see the changelog guide

Stale PRs Copy Chapter

Inactive PRs (~3 months) may be closed by GitHub’s stale workflow.

• If we owe review, ping us to get things moving again.
• If you owed changes and the PR auto-closed, we may push to your branch or close it and continue in a new PR based on your work.

Contributing To Eui Designing README (`wiki/contributing-to-eui/designing/README.md`) Copy Section

Design System Synchronization Guidelines

When submitting code changes that affect the visual design, behavior, or properties of EUI components or tokens, it's critical to ensure the Elastic UI Borealis Figma library remains synchronized with the codebase. This maintains design-development consistency across the entire Elastic ecosystem.

When Figma Updates Are Required Copy Chapter

Code changes that impact design and require Figma library updates include:

• Component visual changes: Styling modifications, color updates, spacing adjustments, typography changes
• New component creation: Following the four-step component creation process
• Props modifications: Adding, removing, or changing component properties that affect visual output
• Icon additions/changes: New icons or modifications to existing ones per icon creation guidelines
• Design token updates: Changes to colors, spacing, typography, or other design tokens
• Behavioral changes: Interactions, states, or animations that alter user experience

Design Review Process Copy Chapter

1. Contact the design colleague in your team who can support you throughout the process, if needed.
2. Create a new Figma branch in the Elastic UI Borealis library that includes the proposed changes and links to the related PR.
3. Request a design review in Figma using the built-in workflow, or share the branch in the #eui-design Slack channel.

Contributing To Eui Developing README (`wiki/contributing-to-eui/developing/README.md`) Copy Section

Component development & architecture

Before working with EUI components or creating new ones, you will want to run a local development server. EUI has two complementary local servers:

• Storybook at http://localhost:6006/ — the recommended environment for component development.
• Docusaurus website at http://localhost:3000/ — the consumer-facing documentation site.

Both servers watch for source changes and recompile automatically.

Component creation Copy Chapter

There are four steps to creating a new component:

1. Create the React portion of the component
   • See Component file & folder architecture for more detailed steps on how to spin up new files
2. Create the styles
   • See Writing styles with Emotion
3. Write tests
   • All components should have at minimum unit tests
   • For more, see the dedicated testing wiki docs
4. Document it with examples in packages/website
   • See the dedicated documentation wiki guidelines

Component patterns Copy Chapter

We use a number of patterns and conventions throughout our components for naming, props, refs, and icons that should be followed whenever possible.

Contributing To Eui Documenting README (`wiki/contributing-to-eui/documenting/README.md`) Copy Section

Documentation guidelines

Always remember to update the documentation site in the packages/website folder and add a changelog in the same PR that contains functional changes. We do this in tandem to prevent our examples from going out of sync with the actual components. In this sense, treat documentation no differently than how you would treat tests.

The complexity of the component should determine how many examples you need to create, and how complex they should be. In general, your examples should demonstrate:

• The most common use-cases for the component.
• How the component handles edge cases, e.g. overflowing content, text-based vs. element-based content.
• The various states of the component, e.g. disabled, selected, empty of content, error state.

Refer to Writing documentation for information on the process of documenting components.

Formatting & writing style Copy Chapter

Here are our formatting guidelines for writing documentation:

• Use sentence case, always, for page and section titles. Example: This component does something
• Component names:
  • When referencing the component name, wrap it in ** tags. Example: EuiComponent**
  • When referencing the component name, always include the Eui prefix unless you are referencing the generic term. Example: EuiFlyout vs flyout
• Code syntax:
  • Wrap references to prop names and elements in code blocks. Example: `propName`

Contributing To Eui Testing README (`wiki/contributing-to-eui/testing/README.md`) Copy Section

Testing EUI components

All components should have, at minimum, unit tests for each prop.

Test stack at a glance Copy Chapter

• Jest unit tests — required for every component. New tests should be written with React Testing Library; legacy Enzyme tests still exist and are being migrated.
• Cypress component tests — optional, used for complex components or where real-browser DOM and interactions are needed.
• Storybook — the component development environment and the source of stories used by visual regression testing.
• Visual regression tests — Playwright + jest-image-snapshot against Storybook stories, run on every pull request.
• EUI test helpers — Playwright validation tests for @elastic/eui-test-helpers, run on every pull request with flake detection when a component changes.

Code coverage Copy Chapter

Code coverage is a tool intended to help devs quickly find lines/branches that still need to be covered and determine test cases to write. EUI does not enforce a code coverage threshold in CI; reports are generated on demand for local inspection.

Jest coverage reports Copy Section

Jest code coverage reports can be generated by running yarn test-unit with the --coverage flag. Generated HTML reports are output to the reports/ folder.

To view the reports, you can either drag the reports/jest-coverage/index.html file into a browser window, or in a terminal, run open reports/jest-coverage/index.html from the EUI project root.

Cypress coverage reports Copy Section

Cypress has been configured to automatically output Cypress code coverage to the reports/cypress-coverage folder. If you would prefer to turn this off locally, you can add the --env coverage=false flag when running your your cypress commands.

To view the reports, you can either drag the reports/cypress-coverage/index.html file into a browser window, or in a terminal, run open reports/cypress-coverage/index.html from the EUI project root.

Combined Jest & Cypress coverage reports Copy Section

If you're working on a component that has both Cypress and Jest tests, we have a command that allows you to combine the results of both coverage reports.

1. Setup: On the component(s) you're looking for final coverage #s for,

• Ensure you have already run yarn test-unit --coverage to generate a Jest report
• Ensure you have already run yarn test-cypress to generate a Cypress report

2. Run yarn combine-test-coverage

• This should automatically open a browser window with reports/combined-coverage/index.html

Packages Website Docs Components Index (`packages/website/docs/components/index.mdx`) Copy Section

sidebar_position: 1 Copy Chapter

Overview

EUI offers a wide variety of components. This section is organized topically with individual pages containing live example, usage recommendations, guidelines, and props.

The adjacent patterns section provides additional guidance for handling use cases that cross multiple components.

Components by topic Copy Chapter

• Layout
• Containers
• Navigation
• Display
• Forms
• Data grid
• Tables
• Templates
• Editors and syntax

Packages Website Docs Content Index (`packages/website/docs/content/index.mdx`) Copy Section

sidebar_position: 1 Copy Chapter

Overview

Our content guidelines cover the main principles we follow for crafting consistent, clear, and concise copy across Elastic products:

• Voice and writing style
• Tone
• Language
• Accessibility
• Inclusivity
• Word choice

Some more specific guidelines and best practices apply in certain situations or for certain components:

• Patterns
  • Find the right way to add help content to a UI: Help content patterns.
  • Write helpful error messages.
• Components

Packages Website Docs Dataviz Index (`packages/website/docs/dataviz/index.mdx`) Copy Section

sidebar_position: 1 Copy Chapter

import figmaDatavizConsistency from '!url-loader!./assets/dataviz_consistency.svg';
import figmaDatavizHierarchyOfInformation from '!url-loader!./assets/dataviz_hierarchy-of-information.svg';
import figmaDatavizSemantic from '!url-loader!./assets/dataviz_semantic.svg';
import figmaDatavizTitlesAndLabels from '!url-loader!./assets/dataviz_titles-and-labels.svg';
import figmaDatavizMultiPurposeCharts from '!url-loader!./assets/dataviz_multi-purpose-charts.svg';
import figmaDatavizTimeAxis from '!url-loader!./assets/dataviz_time-axis.svg';

Overview

import VersionBadge from './version_badge';

import { EuiLink } from '@elastic/eui';

yarn add @atlaskit/pragmatic-drag-and-drop @atlaskit/pragmatic-drag-and-drop-hitbox

import { css } from '@emotion/react';
import {
  EuiAccordion,
  EuiIcon,
  EuiPanel,
  EuiText,
  useEuiTheme,
} from '@elastic/eui';
import {
  draggable,
  dropTargetForElements,
  monitorForElements,
} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
import {
  attachInstruction,
  extractInstruction,
} from '@atlaskit/pragmatic-drag-and-drop-hitbox/list-item';

import ExampleCode from '!!raw-loader!./example';

import { css } from '@emotion/react';
import { EuiButton, EuiButtonIcon, EuiIcon, EuiTable, EuiTableBody, EuiTableHeader, EuiTableHeaderCell, EuiTableRow, EuiTableRowCell } from '@elastic/eui';

<EuiTableRow>
  <EuiTableRowCell>1</EuiTableRowCell>
  <EuiTableRowCell>Good / Success</EuiTableRowCell>
  <EuiTableRowCell>Created for a direct association with positive meanings, used for healthy elements and positive outcomes.</EuiTableRowCell>
</EuiTableRow>

<EuiTableRow>
  <EuiTableRowCell>2</EuiTableRowCell>
  <EuiTableRowCell>Regular / Neutral</EuiTableRowCell>
  <EuiTableRowCell>Used for usual, acceptable states that need to be recognised but don't need to stand out.</EuiTableRowCell>
</EuiTableRow>

<EuiTableRow>
  <EuiTableRowCell>3</EuiTableRowCell>
  <EuiTableRowCell>Warning</EuiTableRowCell>
  <EuiTableRowCell>The starting level of concern, used for elements that would need attention.</EuiTableRowCell>
</EuiTableRow>

<EuiTableRow>
  <EuiTableRowCell>4</EuiTableRowCell>
  <EuiTableRowCell>Risk</EuiTableRowCell>
  <EuiTableRowCell>Middle level of risk, used for potential escalations and increasing level of severity.</EuiTableRowCell>
</EuiTableRow>

<EuiTableRow>
  <EuiTableRowCell>5</EuiTableRowCell>
  <EuiTableRowCell>Danger</EuiTableRowCell>
  <EuiTableRowCell>Highest level of danger, used for elements that need immediate support and attention.</EuiTableRowCell>
</EuiTableRow>

<EuiTableRow>
  <EuiTableRowCell>Good / Success</EuiTableRowCell>
  <EuiTableRowCell>-</EuiTableRowCell>
  <EuiTableRowCell>Healthy</EuiTableRowCell>
  <EuiTableRowCell>-</EuiTableRowCell>
</EuiTableRow>

<EuiTableRow>
  <EuiTableRowCell>Regular / Neutral</EuiTableRowCell>
  <EuiTableRowCell>Low</EuiTableRowCell>
  <EuiTableRowCell>-</EuiTableRowCell>
  <EuiTableRowCell>Low</EuiTableRowCell>
</EuiTableRow>

<EuiTableRow>
  <EuiTableRowCell>Warning</EuiTableRowCell>
  <EuiTableRowCell>Medium</EuiTableRowCell>
  <EuiTableRowCell>Degrading</EuiTableRowCell>
  <EuiTableRowCell>Warn</EuiTableRowCell>
</EuiTableRow>

<EuiTableRow>
  <EuiTableRowCell>Risk</EuiTableRowCell>
  <EuiTableRowCell>High</EuiTableRowCell>
  <EuiTableRowCell>-</EuiTableRowCell>
  <EuiTableRowCell>Minor, Major</EuiTableRowCell>
</EuiTableRow>

<EuiTableRow>
  <EuiTableRowCell>Danger</EuiTableRowCell>
  <EuiTableRowCell>Critical</EuiTableRowCell>
  <EuiTableRowCell>Violated</EuiTableRowCell>
  <EuiTableRowCell>Critical</EuiTableRowCell>
</EuiTableRow>

import { SeverityColorAssociationTable } from './color_association_table.tsx';

</Demo>

### Showing on focus

If the wrapped element is **focusable**, you must use the `showOnFocus` prop to visibly show the element to all users when focused.

*Tab through the following example with your keyboard to verify the element is visible on focus.*

<Demo>
```tsx
import React from 'react';
import { EuiText, EuiScreenReaderOnly, EuiLink, EuiToolTip, EuiButtonIcon } from '@elastic/eui';

export default () => (
  <EuiText>
    <p>
      This link is visible to all on focus:{' '}
      <EuiScreenReaderOnly showOnFocus>
        <EuiLink href="./utilities/accessibility">Link text</EuiLink>
      </EuiScreenReaderOnly>
    </p>
    <p>
      This tooltip + button is visible on focus within:{' '}
      <EuiScreenReaderOnly showOnFocus>
        <span>
          <EuiToolTip content="Information">
            <EuiButtonIcon iconType="info" aria-label="Information" />
          </EuiToolTip>
        </span>
      </EuiScreenReaderOnly>
    </p>
  </EuiText>
);

const startAnnouncements = useCallback(() => {
  const randomNumber = Math.floor(Math.random() * 10) + 1;

  setScreenReaderText(
    `You have ${randomNumber} new notification${randomNumber > 1 ? 's' : ''}.`
  );
}, []);

return (
  <>
    <EuiButton onClick={startAnnouncements}>
      Create screen reader announcement
    </EuiButton>
    <EuiSpacer />
    <EuiText>
      <p>
        <em>Content announced by screen reader: </em>
        <EuiCode>{screenReaderText}</EuiCode>
      </p>
      <EuiScreenReaderLive>
        <p>{screenReaderText}</p>
      </EuiScreenReaderLive>
    </EuiText>
  </>
);

</Demo>

### Auto-focusing the live region on text change

The `focusRegionOnTextChange` prop will automatically focus the `EuiScreenReaderLive` region (causing screen readers to read out the text content) whenever `children` changes.

This is primarily useful for announcing navigation or page changes, when programmatically resetting focus location back to a certain part of the page (where the `EuiScreenReaderLive` is placed) is desired.

*Using a screen reader, click the following navigation links and notice that when the new page is announced, focus is also set to the top of the body content.*

<Demo previewPadding="s">

</Demo>

import { EuiBetaBadge } from '@elastic/eui';

## Live announcer region <EuiBetaBadge label="Beta" color="accent" />

:::warning `EuiLiveAnnouncer` is a new, experimental alternative to `EuiScreenReaderLive` for screen reader live region announcements. 
Its API and behavior may change based on feedback and testing.
:::

Both `EuiLiveAnnouncer` and `EuiScreenReaderLive` are designed for the **same use cases**: to announce dynamic content, such as nodifications or status changes based on user interaction.
The main drawback for live regions is that they must be present on initial page load before reading content updates. `EuiLiveAnnouncer` addresses this 
by updating the content after the initial render to ensure an announcement is made when mounting a component.

Same as for `EuiScreenReaderLive`, `EuiLiveAnnouncer` supports configurable `role` and `aria-live` props which default to `status` and `polite` respectively for non-intrusive but timely update announcements. 
If you're not using the default values, be sure to follow [ARIA guidelines](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) for `role` to `aria-live` mapping.

### Main difference

- **`EuiLiveAnnouncer`** will announce the message **when the component mounts** (e.g., when it first appears in the DOM), as well as when the message changes.
- **`EuiScreenReaderLive`** will only announce when the message changes, and will not announce the initial message on mount.

This means `EuiLiveAnnouncer` is especially useful for scenarios where you want to ensure an announcement is made immediately when a component is mounted, e.g. showing a notification or alert based on user interaction.

An additional difference is that `EuiLiveAnnouncer` can clear its message after a configurable timeout via `clearAfterMs`, which prevents stale 
announcements and duplicated DOM content for screen reader users. Screen readers will continue reading the message even if it was already cleared.

<Demo>
  ```tsx
  import { useState } from 'react';
  import { EuiButton, EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiLiveAnnouncer, EuiSpacer } from '@elastic/eui';

  export default () => {
    const [announcement, setAnnouncement] = useState('No notifications.');
    const [isShown, setIsShown] = useState(false);

    return (
      <EuiFlexGroup direction="column" gutterSize="m" css={{ maxWidth: 300 }}>
        <EuiFlexItem>
          <EuiButton onClick={() => setIsShown((shown) => !shown)}>
            Toggle announcement
          </EuiButton>
        </EuiFlexItem>

        <EuiFlexItem>
          {isShown && (
            <>
              <EuiButton onClick={() => setAnnouncement(`You have ${Math.floor(Math.random() * 1000)} new notifications.`)}>
                Update announcement
              </EuiButton>
              <EuiSpacer size="m" />
              <EuiCodeBlock>{announcement}</EuiCodeBlock>
              <EuiLiveAnnouncer>
                {announcement}
              </EuiLiveAnnouncer>
            </>
          )}
        </EuiFlexItem>
      </EuiFlexGroup>
    );
  };

</Demo>

## Styles helpers

import { ClassNamePreview } from './class_name_preview';
import { FunctionPreview } from './function_preview';
import { HookPreview } from './hook_preview';

<Example>
<Example.Description>
  ### `.euiScreenReaderOnly` className

  This utility class allows you to apply the screen reader only CSS styles directly to your component.
</Example.Description>
<Example.Preview>
  <ClassNamePreview />
</Example.Preview>
<Example.Snippet>
  ```tsx
  <p className="euiScreenReaderOnly" />
  ```
</Example.Snippet>
</Example>

<Example>
<Example.Description>
  ### `euiScreenReaderOnly()` function

  This function allows you to apply the screen reader only CSS styles directly to your component.
</Example.Description>
<Example.Preview>
  <FunctionPreview />
</Example.Preview>
<Example.Snippet>
  ```tsx
  css`
    ${euiScreenReaderOnly()}
  `
  ```
</Example.Snippet>
</Example>

<Example>
<Example.Description>
  ### `useEuiFocusRing(offset?, color?)` hook

  By default, all interactive elements will inherit the `outline` property from the reset file. However, some instances require adjustment to the `offset` and `color` of this outline. This helper function allows that customization of the focus outline.

  `offset: 'inset' | 'outset' | 'center' | CSSProperties['outlineOffset'];`

  `color: CSSProperties['outlineColor'];`
</Example.Description>
<Example.Preview>
  <HookPreview />
</Example.Preview>
<Example.Snippet>
  ```tsx
  css`
    &:focus {
      ${useEuiFocusRing('center', euiTheme.colors.accent)}
    }
  `
  ```
</Example.Snippet>
</Example>

## Props

import docgen from '@elastic/eui-docgen/dist/components';






---

### Packages Website Docs Utilities Color Palettes Index (`packages/website/docs/utilities/color-palettes/index.mdx`)

# Color palettes

import { ColorPaletteCopyCode, ColorPaletteFlexItem } from './color_palettes_components';
import colorPaletteComponentsSource from '!raw-loader!./color_palettes_components';

EUI provides a base set of color palettes that return an array of hexadecimal color for use in other EUI components or charts.

## Preset qualitative palettes

Qualitative palettes are best suited for communicating and comparing discrete data series. EUI recommends using the `euiPaletteColorBlind()` for qualitative and categorical data.

This palette is restricted to only 10 colors. However, you can add more groups of 10 which are alternates of the original. This is better than allowing the initial set to loop.

These colors are meant to be used as graphics and contrasted against the value of `euiColorEmptyShade` for the current theme. When placing text on top of these colors, use the `euiPaletteColorBlindBehindText()` variant. It is a brightened version of the base palette to create better contrast with text.

<Demo scope={{ ColorPaletteCopyCode, ColorPaletteFlexItem }} extraFiles={{ 'color_palettes_components.tsx': colorPaletteComponentsSource }}>

</Demo>

## Recommended quantitative palettes

Quantitative palettes are best suited for displaying data on a continuum, as in the case of health statuses and large geographic or demographic-based data sets.

EUI provides the following common palettes for quantitative data and [charts](../../dataviz/index.mdx). Just pass in the number of steps needed and the function will interpolate between the colors.
For usages in React we recommend using the respective [palette hooks](https://github.com/elastic/eui/blob/main/packages/eui/src/services/color/eui_palettes_hooks.ts), e.g. `useEuiPaletteColorBlind`.

:::warning
The palette for status is the only palette that has proper contrast ratios. When using the other palettes, consider adding another form of the data for screen readers.
:::

<Demo scope={{ ColorPaletteCopyCode, ColorPaletteFlexItem }} extraFiles={{ 'color_palettes_components.tsx': colorPaletteComponentsSource }}>

</Demo>

## Custom palettes

Use the `colorPalette` service to generate a custom, gradiated palette array of any length from one or more hexadecimal color codes. The third parameter `divergent`, will interpolate between the two halves of the spectrums separately. If a middle point is not provided, it will graduate to light gray.

<Demo scope={{ ColorPaletteCopyCode, ColorPaletteFlexItem }} extraFiles={{ 'color_palettes_components.tsx': colorPaletteComponentsSource }}>

</Demo>

## Props

import docgen from '@elastic/eui-docgen/dist/services/color';



---

### Packages Website Docs Utilities Focus Trap Index (`packages/website/docs/utilities/focus-trap/index.mdx`)

---
keywords: [EuiFocusTrap]
---

# Focus trap

Use **EuiFocusTrap** to prevent keyboard-initiated focus from leaving a defined area. Temporary flows and UX escapes that occur in components such as [EuiModal](../../components/containers/modal/index.mdx) and [EuiFlyout](../../components/containers/flyout/index.mdx) are prime examples.

For components that project content in a React portal, **EuiFocusTrap** will maintain the tab order expected by users.

* Use `clickOutsideDisables` to disable the focus trap when the user clicks outside the trap.
* Use `noIsolation={false}` when pointer events on outside elements should be disallowed.
* Use `crossFrame={true}` when focus should not be allowed on other iframes on the page.

import FormExample from './form_compressed';
import formCompressedSource from '!raw-loader!./form_compressed';

<Demo scope={{ FormExample }} extraFiles={{ 'form_compressed.tsx': formCompressedSource }}>
```tsx interactive
import React, { useState } from 'react';

import {
  EuiBadge,
  EuiButton,
  EuiFocusTrap,
  EuiPanel,
  EuiSpacer,
  EuiText,
} from '@elastic/eui';
import FormExample from './form_compressed';

export default () => {
  const [isDisabled, changeDisabled] = useState(true);

  const toggleDisabled = () => changeDisabled(!isDisabled);

  return (
    <div>
      <EuiBadge>Trap is {isDisabled ? 'disabled' : 'enabled'}</EuiBadge>
      <EuiSpacer size="s" />
      <EuiFocusTrap disabled={isDisabled}>
        <EuiPanel>
          <FormExample />
          <EuiSpacer size="m" />
          <EuiButton onClick={toggleDisabled}>
            {`${!isDisabled ? 'Disable' : 'Enable'} Focus Trap`}
          </EuiButton>
        </EuiPanel>
      </EuiFocusTrap>
      <EuiSpacer size="l" />
      <EuiText>
        The button below is not focusable by keyboard as long as the focus trap
        is enabled.
      </EuiText>
      <EuiButton onClick={() => {}}>External Focusable Element</EuiButton>
    </div>
  );
};

Use this utility class to style the browser's scrollbar in a minimal aesthetic. This is best used on small, inner-page contents like panels wherever you have `overflow: auto`.

Use this style function to style the browser's scrollbar in a minimal aesthetic. This is best used on small, inner-page contents like panels.

All parameters are optional and default to specific global settings.

Quick utility class for adding vertical scrolling to a container.

Styles hook for adding vertical scrolling to a container.

To mask the top and bottom of the scrolled content, indicating visually that there is more content below, pass in true to the second parameter `mask`.

`useEuiOverflowScroll('y', true);`

Quick utility class for adding horizontal scrolling to a container.

Styles hook for adding horizontal scrolling to a container.

To mask the top and bottom of the scrolled content, indicating visually that there is more content below, pass in true to the second parameter `mask`.

`useEuiOverflowScroll('x', true);`

Quick utility for expanding the height of the element to its parents dimensions. Use it to stretch each nested element until the one that applies scroll.

Works on both flex and non-flex elements.

<EuiFlexGroup className="eui-fullHeight" gutterSize="s" responsive={false}>
    <EuiFlexItem>
      <EuiPanel className="eui-yScroll" color="warning" tabIndex={0}>
        <EuiText size="s">
          
            Orbiting this at a distance of roughly ninety-two million miles is
            an utterly insignificant little blue green planet whose
            ape-descended life forms are so amazingly primitive that they
            still think digital watches are a pretty neat idea.
          
        </EuiText>
      </EuiPanel>
    </EuiFlexItem>
    <EuiFlexItem>
      <EuiPanel className="eui-yScroll" color="warning" tabIndex={0}>
        <EuiText size="s">
          
            Orbiting this at a distance of roughly ninety-two million miles is
            an utterly insignificant little blue green planet whose
            ape-descended life forms are so amazingly primitive that they
            still think digital watches are a pretty neat idea.
          
        </EuiText>
      </EuiPanel>
    </EuiFlexItem>
  </EuiFlexGroup>

Emotion mixin for adding full height scrolling to a container or flex child.

It applies `height: 100%; overflow: hidden;` but also adds `flex: 1 1 auto;` for use within `flex` containers.

import React from 'react';

import {
  EuiModal,
  EuiModalBody,
  EuiModalHeader,
  EuiModalHeaderTitle,
} from '@elastic/eui';
import { ModalExample } from './modal_example';

const BasicModal = ({ onClose }) => (
  <EuiModal onClose={onClose} style={{ width: '800px' }}>
    <EuiModalHeader>
      <EuiModalHeaderTitle>Example modal</EuiModalHeaderTitle>
    </EuiModalHeader>
    <EuiModalBody>
      <p>
        This modal closes when you press ESC, using a window event listener.
      </p>
    </EuiModalBody>
  </EuiModal>
);

export default () => <ModalExample modal={BasicModal} />;

import React, { useState } from 'react';

import {
  EuiModal,
  EuiModalBody,
  EuiModalHeader,
  EuiModalHeaderTitle,
  EuiFieldText,
  EuiSpacer,
  keys,
} from '@elastic/eui';
import { ModalExample } from './modal_example';

const ConflictModal = (props) => {
  const [inputValue, setInputValue] = useState('');

  const updateInputValue = (e) => {
    setInputValue(e.target.value);
  };

  const clearInputValueOnEscape = (event) => {
    if (event.key === keys.ESCAPE) {
      setInputValue('');
      event.stopPropagation();
    }
  };

  return (
    <EuiModal onClose={props.onClose} style={{ width: '800px' }}>
      <EuiModalHeader>
        <EuiModalHeaderTitle>Example modal</EuiModalHeaderTitle>
      </EuiModalHeader>
      <EuiModalBody>
        <EuiFieldText
          value={inputValue}
          onChange={updateInputValue}
          onKeyDown={clearInputValueOnEscape}
        />
        <EuiSpacer size="s" />
        <p>While typing in this field, ESC will clear the field.</p>
        <EuiSpacer size="l" />
        <p>
          Otherwise, the event bubbles up to the window and ESC closes the
          modal.
        </p>
      </EuiModalBody>
    </EuiModal>
  );
};

export default () => (
  <ModalExample
    modal={ConflictModal}
    buttonText="Open Modal with Conflicting Listener"
  />
);

</Demo>

## Props

import docgen from '@elastic/eui-docgen/dist/services/window_event';



---

### Packages Website Docs Components Containers Flyout Index (`packages/website/docs/components/containers/flyout/index.mdx`)

---
keywords: [EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiFlyoutFooter, EuiFlyoutMenu]
---

# Flyout

**EuiFlyout** is a fixed position panel that pops in from the side of the window. It should be used to reveal more detailed contextual information or to provide complex forms without losing the user's current state. It is a good alternative to [modals](../modal/index.mdx) when the action is not transient.

Like modals, you control the visibility of the flyout using your own state management, but **EuiFlyout** requires an `onClose` handler for it's internal dismiss buttons.

## Component

:::accessibility Accessibility requirement
Use `aria-labelledby={headingId}` to ensure the flyout is announced to screen readers.
:::

```tsx interactive
import React, { useState } from 'react';
import {
  EuiFlyout,
  EuiFlyoutBody,
  EuiFlyoutHeader,
  EuiButton,
  EuiText,
  EuiTitle,
  EuiCodeBlock,
  useGeneratedHtmlId,
} from '@elastic/eui';

export default () => {
  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
  const simpleFlyoutTitleId = useGeneratedHtmlId({
    prefix: 'simpleFlyoutTitle',
  });

  let flyout;

  const htmlCode = `<EuiFlyout ...>
  <EuiFlyoutHeader hasBorder>
    <EuiTitle size="m">
      <h2></h2>
    </EuiTitle>
  </EuiFlyoutHeader>
  <EuiFlyoutBody>
    ...
  </EuiFlyoutBody>
</EuiFlyout>
`;

  if (isFlyoutVisible) {
    flyout = (
      <EuiFlyout
        ownFocus
        onClose={() => setIsFlyoutVisible(false)}
        aria-labelledby={simpleFlyoutTitleId}
      >
        <EuiFlyoutHeader hasBorder>
          <EuiTitle size="m">
            <h2 id={simpleFlyoutTitleId}>A typical flyout</h2>
          </EuiTitle>
        </EuiFlyoutHeader>
        <EuiFlyoutBody>
          <EuiText>
            <p>
              For consistency across the many flyouts, please utilize the
              following code for implementing the flyout with a header.
            </p>
          </EuiText>
          <EuiCodeBlock language="html">{htmlCode}</EuiCodeBlock>
        </EuiFlyoutBody>
      </EuiFlyout>
    );
  }

  return (
    <div>
      <EuiButton onClick={() => setIsFlyoutVisible(true)}>
        Show flyout
      </EuiButton>
      {flyout}
    </div>
  );
};

/* Detailed source-code truncated for AI context efficiency. */

/* Detailed source-code truncated for AI context efficiency. */

/* Detailed source-code truncated for AI context efficiency. */

/* Detailed source-code truncated for AI context efficiency. */

import React, { useState } from 'react';
import {
  EuiFlyout,
  EuiFlyoutHeader,
  EuiFlyoutBody,
  EuiButton,
  EuiText,
  EuiTitle,
  useGeneratedHtmlId,
} from '@elastic/eui';

export default () => {
  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);

  const closeFlyout = () => setIsFlyoutVisible(false);

  const toggleFlyout = () => setIsFlyoutVisible((isVisible) => !isVisible);

  const withoutFocusFlyoutTitleId = useGeneratedHtmlId({
    prefix: 'withoutFocusFlyoutTitle',
  });

  let flyout;
  if (isFlyoutVisible) {
    flyout = (
      <EuiFlyout
        ownFocus={false}
        onClose={closeFlyout}
        aria-labelledby={withoutFocusFlyoutTitleId}
      >
        <EuiFlyoutHeader hasBorder>
          <EuiTitle size="s">
            <h2 id={withoutFocusFlyoutTitleId}>A flyout without ownFocus</h2>
          </EuiTitle>
        </EuiFlyoutHeader>
        <EuiFlyoutBody>
          <EuiText>
            <p>
              The page contents is still interactive though screen reader users
              will find themselves still within the bounds of the flyout.
            </p>
          </EuiText>
        </EuiFlyoutBody>
      </EuiFlyout>
    );
  }
  return (
    <div>
      <EuiButton onClick={toggleFlyout}>Toggle flyout</EuiButton>

      {flyout}
    </div>
  );
};

/* Detailed source-code truncated for AI context efficiency. */

<EuiFlyout
  focusTrapProps={{
    returnFocus: (triggerElement) => {
      // Return true to use default behavior (focus triggerElement)
      // Return false to prevent default behavior
      if (customElement.current) {
        customElement.current.focus();
        return false;
      }
      return true;
    },
  }}
/>

const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);

<main ref={setContainerEl}>
  {isFlyoutVisible && (
    <EuiFlyout container={containerEl} onClose={closeFlyout}>
      {/* ... */}
    </EuiFlyout>
  )}
</main>

import { EuiBetaBadge } from '@elastic/eui';

/* Detailed source-code truncated for AI context efficiency. */

<EuiModal
  focusTrapProps={{
    returnFocus: (triggerElement) => {
      // Return true to use default behavior (focus triggerElement)
      // Return false to prevent default behavior
      if (customElement.current) {
        customElement.current.focus();
        return false;
      }
      return true;
    },
  }}
/>

import React from 'react';
import { EuiPanel } from '@elastic/eui';

export default () => (
  <EuiPanel>
    Default panel
  </EuiPanel>
);

import React from 'react';
import { EuiPanel, EuiCode, EuiSpacer } from '@elastic/eui';

export default () => (
  <div>
    <EuiPanel paddingSize="none">
      <EuiCode>paddingSize=&quot;none&quot;</EuiCode>
    </EuiPanel>

    <EuiSpacer size="l" />

    <EuiPanel paddingSize="s">
      <EuiCode>paddingSize=&quot;s&quot;</EuiCode>
    </EuiPanel>

    <EuiSpacer size="l" />

    <EuiPanel paddingSize="m">
      <EuiCode>paddingSize=&quot;m&quot; (default)</EuiCode>
    </EuiPanel>

    <EuiSpacer size="l" />

    <EuiPanel paddingSize="l">
      <EuiCode>paddingSize=&quot;l&quot;</EuiCode>
    </EuiPanel>
  </div>
);

import React from 'react';
import { EuiPanel, EuiCode, EuiSpacer } from '@elastic/eui';

export default () => {
  return (
    <div>
      <EuiPanel>
        <EuiCode>Default (hasBorder, no shadow)</EuiCode>
      </EuiPanel>

      <EuiSpacer />

      <EuiPanel hasBorder={false} hasShadow>
        <EuiCode>{'hasBorder={false} hasShadow'}</EuiCode>
      </EuiPanel>
    </div>
  );
};

import React from 'react';
import { EuiPanel, EuiSpacer } from '@elastic/eui';

export default () => (
  <div>
    <EuiPanel color="subdued" borderRadius="none" hasShadow={false}>
      <p>I am a simple shaded box</p>
    </EuiPanel>

    <EuiSpacer />

    <EuiPanel color="transparent" hasBorder={false}>
      <p>I am a transparent box simply for padding</p>
    </EuiPanel>
  </div>
);

import React from 'react';
import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';

export default () => (
  <EuiFlexGroup gutterSize="l">
    <EuiFlexItem>
      <EuiPanel>
        <EuiText>
          <p>
            I am some panel content...
            <br /> ... <br /> ... <br />
            whose content is tall
          </p>
        </EuiText>
      </EuiPanel>
    </EuiFlexItem>
    <EuiFlexItem>
      <EuiPanel grow={true}>
        <EuiText>
          <p>I am some panel content... whose content will grow</p>
        </EuiText>
      </EuiPanel>
    </EuiFlexItem>
    <EuiFlexItem>
      <EuiPanel grow={false}>
        <EuiText>
          <p>I am some panel content... whose content did not grow</p>
        </EuiText>
      </EuiPanel>
    </EuiFlexItem>
  </EuiFlexGroup>
);

/* Detailed source-code truncated for AI context efficiency. */

/* Detailed source-code truncated for AI context efficiency. */

/* Detailed source-code truncated for AI context efficiency. */

/* Detailed source-code truncated for AI context efficiency. */

/* Detailed source-code truncated for AI context efficiency. */

import React, { useState } from 'react';
import {
  EuiBadge,
} from '@elastic/eui';

export default () => <EuiBadge>Default badge</EuiBadge>;

/* Detailed source-code truncated for AI context efficiency. */

import React from 'react';
import { EuiBadge } from '@elastic/eui';

export default () => (
  <div>
    <EuiBadge color="hollow" iconType="cross" iconSide="right">
      Hollow
    </EuiBadge>

    <EuiBadge iconType="check">Default</EuiBadge>

    <EuiBadge iconType="lensApp" color="primary">
      Primary with an app icon
    </EuiBadge>

    <EuiBadge iconType="return" />
  </div>
);

/* Detailed source-code truncated for AI context efficiency. */

import React from 'react';
import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';

export default () => (
  <EuiFlexGroup wrap responsive={false} gutterSize="xs">
    <EuiFlexItem grow={false}>
      <EuiBadge color="success">Healthy</EuiBadge>
    </EuiFlexItem>
    <EuiFlexItem grow={false}>
      <EuiBadge color="warning">Warning</EuiBadge>
    </EuiFlexItem>
    <EuiFlexItem grow={false}>
      <EuiBadge color="danger">Critical</EuiBadge>
    </EuiFlexItem>
    <EuiFlexItem grow={false}>
      <EuiBadge color="default">Unknown</EuiBadge>
    </EuiFlexItem>
  </EuiFlexGroup>
);

import React from 'react';
import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';

export default () => (
  <EuiFlexGroup wrap responsive={false} gutterSize="xs">
    <EuiFlexItem grow={false}>
      <EuiBadge color="#BADA55" href="#/display/badge">
        badge as an anchor
      </EuiBadge>
    </EuiFlexItem>
    <EuiFlexItem grow={false}>
      <EuiBadge color="hollow" href="#/display/badge" target="blank">
        anchor with target specified
      </EuiBadge>
    </EuiFlexItem>
    <EuiFlexItem grow={false}>
      <EuiBadge
        color="accent"
        href="#/display/badge"
        iconType="bolt"
        iconSide="right"
        iconOnClick={() => {}}
        iconOnClickAriaLabel="Example of onClick event for icon within the anchor"
      >
        anchor with an icon and iconOnClick
      </EuiBadge>
    </EuiFlexItem>
    <EuiFlexItem grow={false}>
      <EuiBadge color="success" href="#/display/badge" isDisabled={true}>
        disabled anchor badge
      </EuiBadge>
    </EuiFlexItem>
  </EuiFlexGroup>
);

import React from 'react';
import { EuiBadge, EuiPanel, EuiBadgeGroup } from '@elastic/eui';

export default () => (
  <EuiPanel style={{ maxWidth: 200 }}>
    <EuiBadgeGroup gutterSize="s">
      <EuiBadge>Badge with simple text being truncated</EuiBadge>

      <EuiBadge iconType="clock">Badge with icon being truncated</EuiBadge>

      <EuiBadge onClick={() => {}} onClickAriaLabel="Click this badge to...">
        Badge with onClick being truncated
      </EuiBadge>

      <EuiBadge
        iconType="cross"
        iconSide="right"
        iconOnClick={() => {}}
        iconOnClickAriaLabel="Click this icon to..."
      >
        Badge with iconOnClick being truncated
      </EuiBadge>

      <EuiBadge
        iconType="cross"
        iconSide="right"
        onClick={() => {}}
        onClickAriaLabel="Click this badge to..."
        iconOnClick={() => {}}
        iconOnClickAriaLabel="Click this icon to..."
      >
        Badge with both onClicks being truncated
      </EuiBadge>
    </EuiBadgeGroup>
  </EuiPanel>
);

/* Detailed source-code truncated for AI context efficiency. */

/* Detailed source-code truncated for AI context efficiency. */

import React from 'react';
import {
  EuiCommentList,
  EuiComment,
  EuiCode,
  EuiText,
  EuiAvatar,
} from '@elastic/eui';

export default () => (
  <EuiCommentList aria-label="An example with different timeline icons">
    <EuiComment
      username="andred"
      timelineAvatarAriaLabel="Andre Diaz"
      event="is using a default avatar"
    >
      <EuiText size="s">
        <p>
          The avatar initials is generated from the <EuiCode>username</EuiCode>{' '}
          prop.
        </p>
      </EuiText>
    </EuiComment>

    <EuiComment
      username="system"
      timelineAvatarAriaLabel="System"
      timelineAvatar="dot"
      event={
        <>
          The <EuiCode>timelineAvatar</EuiCode> is using a{' '}
          <EuiCode>dot</EuiCode> icon.
        </>
      }
    />

    <EuiComment
      username="cat"
      timelineAvatarAriaLabel="Beautiful cat"
      event="is using a custom avatar"
      timelineAvatar={
        <EuiAvatar name="Cat" imageUrl="https://picsum.photos/id/40/64" />
      }
    >
      <EuiText size="s">
        <p>
          The <EuiCode>timelineAvatar</EuiCode> is using a custom{' '}
          <strong>EuiAvatar</strong>.
        </p>
      </EuiText>
    </EuiComment>
  </EuiCommentList>
);

/* Detailed source-code truncated for AI context efficiency. */

/* Detailed source-code truncated for AI context efficiency. */

import React from 'react';
import { EuiEmptyPrompt, EuiButton, EuiTitle, EuiLink } from '@elastic/eui';

export default () => (
  <EuiEmptyPrompt
    iconType="logoSecurity"
    title={<h2>Start adding cases</h2>}
    body={<p>Add a new case or change your filter settings.</p>}
    actions={
      <EuiButton color="primary" fill>
        Add a case
      </EuiButton>
    }
    footer={
      <>
        <EuiTitle size="xxs">
          <h3>Want to learn more?</h3>
        </EuiTitle>
        <EuiLink href="#" target="_blank">
          Read the docs
        </EuiLink>
      </>
    }
  />
);

import React from 'react';
import { EuiEmptyPrompt, EuiButton, EuiButtonEmpty } from '@elastic/eui';

export default () => (
  <EuiEmptyPrompt
    title={<h2>Upgrade your license to use Machine Learning</h2>}
    actions={[
      <EuiButton color="primary" fill>
        Upgrade
      </EuiButton>,
      <EuiButtonEmpty color="primary">Start a trial</EuiButtonEmpty>,
    ]}
  />
);

import React, { FunctionComponent } from 'react';
import {
  EuiEmptyPrompt,
  EuiButton,
  EuiTitle,
  EuiLink,
  EuiEmptyPromptProps,
} from '@elastic/eui';

export default ({ color }: { color: EuiEmptyPromptProps['color'] }) => {
  return (
    <EuiEmptyPrompt
      iconType="securityAnalyticsApp"
      title={<h2>Start adding cases</h2>}
      color={color}
      body={<p>Add a new case or change your filter settings.</p>}
      actions={
        <EuiButton color="primary" fill>
          Add a case
        </EuiButton>
      }
      footer={
        <>
          <EuiTitle size="xxs">
            <h3>Want to learn more?</h3>
          </EuiTitle>
          <EuiLink href="#" target="_blank">
            Read the docs
          </EuiLink>
        </>
      }
    />
  );
};

import React from 'react';
import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';

export default () => (
  <EuiEmptyPrompt
    iconType="securityAnalyticsApp"
    iconColor="default"
    title={<h2>Start adding cases</h2>}
    titleSize="xs"
    body={<p>Add a new case or change your filter settings.</p>}
    actions={
      <EuiButton size="s" color="primary" fill>
        Add a case
      </EuiButton>
    }
  />
);

import React from 'react';
import { EuiEmptyPrompt, EuiLoadingLogo } from '@elastic/eui';

export default () => (
  <EuiEmptyPrompt
    icon={<EuiLoadingLogo logo="logoKibana" size="xl" />}
    title={<h2>Loading Dashboards</h2>}
  />
);

import React from 'react';
import { EuiEmptyPrompt } from '@elastic/eui';

export default () => (
  <EuiEmptyPrompt
    iconType="error"
    color="danger"
    title={<h2>Unable to load your dashboards</h2>}
    body={
      <p>
        There was an error loading the Dashboard application. Contact your
        administrator for help.
      </p>
    }
  />
);

import React from 'react';
import {
  EuiEmptyPrompt,
  EuiButton,
  EuiTitle,
  EuiLink,
  EuiImage,
} from '@elastic/eui';
import illustration from './illustration.svg';

export default () => {
  return (
    <>
      <EuiEmptyPrompt
        icon={<EuiImage size="fullWidth" src={illustration} alt="" />}
        title={<h2>Create your first visualization</h2>}
        layout="horizontal"
        color="plain"
        body={
          <>
            <p>
              There are no visualizations to display. This tool allows you to
              create a wide range of charts, graphs, maps, and other graphics.
            </p>
            <p>
              The visualizations you create can be easily shared with your
              peers.
            </p>
          </>
        }
        actions={
          <EuiButton color="primary" fill>
            Create visualization
          </EuiButton>
        }
        footer={
          <>
            <EuiTitle size="xxs">
              <span>Want to learn more?</span>
            </EuiTitle>{' '}
            <EuiLink href="#" target="_blank">
              Read the docs
            </EuiLink>
          </>
        }
      />
    </>
  );
};

import React from 'react';
import {
  EuiPageTemplate,
  EuiButton,
  EuiTitle,
  EuiLink,
  EuiImage,
} from '@elastic/eui';
import illustration from './illustration.svg';

export default () => (
  <EuiPageTemplate minHeight="0">
    <EuiPageTemplate.EmptyPrompt
      title={<h2>Create your first visualization</h2>}
      icon={<EuiImage size="fullWidth" src={illustration} alt="" />}
      color="plain"
      layout="horizontal"
      body={
        <>
          <p>
            There are no visualizations to display. This tool allows you to
            create a wide range of charts, graphs, maps, and other graphics.
          </p>
          <p>
            The visualizations you create can be easily shared with your peers.
          </p>
        </>
      }
      actions={
        <EuiButton color="primary" fill>
          Create visualization
        </EuiButton>
      }
      footer={
        <>
          <EuiTitle size="xxs">
            <span>Want to learn more?</span>
          </EuiTitle>{' '}
          <EuiLink href="#" target="_blank">
            Read the docs
          </EuiLink>
        </>
      }
    />
  </EuiPageTemplate>
);

/* Detailed source-code truncated for AI context efficiency. */

import React from 'react';
import { EuiIcon } from '@elastic/eui';

export default () => <EuiIcon type="grid" />;

import React from 'react';
import { css } from '@emotion/react';
import { EuiCodeBlock, EuiSpacer } from '@elastic/eui';
import { IconSearch } from '@site/src/components/display/icons';
import {
  typeToPathMapDocsGlyphIconTypes as iconTypes,
  typeToPathMapSynonyms as iconSynonyms,
} from '../../../../../eui/src/components/icon/icon_map';

export default () => (
  <div css={css`height: fit-content;`}>
    <EuiCodeBlock language="tsx" isCopyable paddingSize="m">
      {'<EuiIcon type="warning" />'}
    </EuiCodeBlock>
    <EuiSpacer />
    <IconSearch iconTypes={iconTypes} iconSynonyms={iconSynonyms} />
  </div>
);

/* Detailed source-code truncated for AI context efficiency. */

import React from 'react';
import { css } from '@emotion/react';
import { EuiCodeBlock, EuiSpacer } from '@elastic/eui';
import { IconSearch } from '@site/src/components/display/icons';
import { typeToPathMapDocsAppIconTypes as iconTypes } from '../../../../../eui/src/components/icon/icon_map';

export default () => (
  <div css={css`height: fit-content;`}>
    <EuiCodeBlock language="tsx" isCopyable paddingSize="m">
      {'<EuiIcon type="addDataApp" size="xl" />'}
    </EuiCodeBlock>
    <EuiSpacer />
    <IconSearch iconTypes={iconTypes} placeholder="Search app logos" iconSize="xl" />
  </div>
);

import React from 'react';
import { css } from '@emotion/react';
import { EuiCodeBlock, EuiSpacer } from '@elastic/eui';
import { IconSearch } from '@site/src/components/display/icons';
import { typeToPathMapDocsMlIconTypes as iconTypes } from '../../../../../eui/src/components/icon/icon_map';

export default () => (
  <div css={css`height: fit-content;`}>
    <EuiCodeBlock language="tsx" isCopyable paddingSize="m">
      {'<EuiIcon type="addDataApp" size="xl" />'}
    </EuiCodeBlock>
    <EuiSpacer />
    <IconSearch
      iconTypes={iconTypes}
      placeholder="Search machine learning app logos"
      iconSize="xl"
    />
  </div>
);

import React from 'react';
import { css } from '@emotion/react';
import { EuiCodeBlock, EuiSpacer, EuiFlexGrid, EuiFlexItem, EuiCopy, EuiPanel, EuiIcon } from '@elastic/eui';
import { iconSizes, iconSizesText } from './icon_sizes';

export default () => (
  <div css={css`height: fit-content;`}>
    <EuiCodeBlock language="tsx" isCopyable paddingSize="m">
      {'<EuiIcon type="logoElasticsearch" size="xl" />'}
    </EuiCodeBlock>
    <EuiSpacer />
    <EuiFlexGrid direction="row" columns={3}>
      {iconSizes.map((size, index) => (
        <EuiFlexItem key={size}>
          <EuiCopy textToCopy={size} afterMessage={`${size} copied`} tooltipProps={{ display: 'block' }}>
            {(copy) => (
              <EuiPanel hasShadow={false} hasBorder={false} onClick={copy} paddingSize="s">
                <EuiIcon className="eui-alignMiddle" type="logoElasticsearch" size={size} /> &emsp;{' '}
                <small>{iconSizesText[index]}</small>
              </EuiPanel>
            )}
          </EuiCopy>
        </EuiFlexItem>
      ))}
    </EuiFlexGrid>
  </div>
);

import React from 'react';
import { css } from '@emotion/react';
import { EuiCodeBlock, EuiSpacer, EuiFlexGrid, EuiFlexItem, EuiCopy, EuiPanel, EuiIcon, EuiThemeProvider } from '@elastic/eui';
import { iconColors } from './icon_colors';

export default () => (
  <div css={css`height: fit-content;`}>
    <EuiCodeBlock language="tsx" isCopyable paddingSize="m">
      {'<EuiIcon type="brush" color="primary" />'}
    </EuiCodeBlock>
    <EuiSpacer />
    <EuiFlexGrid direction="row" columns={3}>
      {iconColors.map((color) => (
        <EuiFlexItem key={color}>
          <EuiCopy textToCopy={color} afterMessage={`${color} copied`} tooltipProps={{ display: 'block' }}>
            {(copy) => {
              const panel = (
                <EuiPanel hasShadow={false} hasBorder={false} onClick={copy} paddingSize="s">
                  <EuiIcon className="eui-alignMiddle" type="brush" color={color} /> &emsp;{' '}
                  <small>{color}</small>
                </EuiPanel>
              );
              return color === 'ghost'
                ? <EuiThemeProvider colorMode="DARK">{panel}</EuiThemeProvider>
                : panel;
            }}
          </EuiCopy>
        </EuiFlexItem>
      ))}
    </EuiFlexGrid>
  </div>
);

/* Detailed source-code truncated for AI context efficiency. */

@elastic/eui/dist/svgs/accessibility.svg
@elastic/eui/dist/svgs/tokens/tokenAlias.svg

import icons from ‘@elastic/eui/dist/eui-icons.json’;
const svg = icons[‘accessibility’];         // plain glyph
const tokenSvg = icons[‘tokens/tokenAlias’]; // token icon

import React from 'react';
import { css } from '@emotion/react';
import { EuiCodeBlock, EuiSpacer, EuiToken } from '@elastic/eui';
import { IconSearch } from '@site/src/components/display/icons';
import { typeToPathMapDocsTokenIconTypes as iconTypes } from '../../../../../eui/src/components/icon/icon_map';

export default () => (
  <div css={css`height: fit-content;`}>
    <EuiCodeBlock language="tsx" isCopyable paddingSize="m">
      {'<EuiToken iconType="tokenAlias" />'}
    </EuiCodeBlock>
    <EuiSpacer />
    <IconSearch
      iconTypes={iconTypes}
      placeholder="Search token icons"
      renderIcon={(iconType) => (
        <EuiToken className="eui-alignMiddle" iconType={iconType} />
      )}
    />
  </div>
);