# React UI (@splunk/react-ui)

A library of UI components, all independent of the Splunk Enterprise environment.

## [Resources]

- **Testing**
- **Theming**
- **Notifications** (Keywords: 'notification', 'toast', 'message', 'alert')

## Base

- **Anchor** — An Anchor is used to add a fragment link to a component.
- **Avatar** — An `Avatar` is used to represent a user. Displays a profile picture, icon or initials.
- **Badge** — A `Badge` is a visual indicator communicating status or description of an element.
- **Button** — Use Button for clickable actions or as links to another page. Button automatically selects the appropriate tag.
- **Card** — Card displays information that can contain a header, body, and footer.
- **Card Layout** — Card Layout provides a container to responsively arrange and resize [Cards](./Card).
- **Chip** — Chip is a compact element that represents an input, attribute, or action.
- **Code** — Code displays a code block component with syntax highlighting.
- **Collapsible Panel** — A Collapsible Panel expands and collapses multiple Panels to show and hide content. This component contains a head and a body. When a user clicks the head, the body expands or collapses. Use Collapsible Panel to expand and collapse multiple Panels. To expand and collapse only one Panel at a time, use `SingleOpenPanelGroup`. Collapsible Panel supports both controlled and uncontrolled patterns. (Keywords: 'disclosure')
- **Drawer** — Drawer renders an overlay that captures the focus of the page.
- **JSON Tree** — The JSON Tree displays and explores JSON data.
- **Link** — A Link component.
- **Markdown** — Markdown renders Markdown text using Splunk UI components.
- **Modal** — Modal renders an overlay that captures the focus of the page.
- **Paginator** — A basic paginator component for navigating multi-page data.
- **Progress** — Used to indicate the current progress of a process.
- **Split Button** — A Split Button is a Button with a primary action and a secondary Menu that groups similar actions together.
- **Step Bar** — Provides feedback on progress through a multi-step process.
- **Switch** — An input for boolean values. (Keywords: 'toggle')
- **Tab Bar** — A bar with tabs for navigating between pages of content. Also see [Tab Layout](./TabLayout) which will automatically switch content to the selected tab.
- **Tab Layout** — A group of content Panels managed by a [Tab Bar](TabBar).
- **Table** — A styled table component.
- **Tooltip** — A contextual overlay with additional information.
- **Wait Spinner** — A loading indicator.

## Content

- **Definition List** — A Definition List displays a list of key-value(s) pairs as a list of formatted terms and descriptions. (Keywords: 'key-value', 'pair', 'key', 'value')
- **Heading** — Use Heading to include a styled heading. (Keywords: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6')
- **List** — Use List for a styled ordered or unordered list. (Keywords: 'ol', 'ul', 'unordered', 'ordered')
- **Paragraph** — A styled element for a paragraph of text.
- **Typography** — Utility component for styling text content. This component wraps the `@splunk/themes` `typography` mixin in a convenient JSX component. (Keywords: 'typography', 'fonts')

## Data Entry

- **Checkbox** — An input to select one or more boolean value options from a list. (Keywords: 'input')
- **Color** — An input for selecting a color. (Keywords: 'input')
- **Combo Box** — An text input with autocomplete. (Keywords: 'input', 'option')
- **Control Group** — A container for controls that handles various style and accessibility issues.
- **Date** — An input for selecting a date. (Keywords: 'input')
- **Dual Listbox** — A pair of listboxes that allow users to select items from two separate lists and move items between them.
- **File** — An input for files. See [FileReader on MDN](https://developer.mozilla.org/en-US/docs/Web/API/FileReader) for information on reading files. The examples do not cover common scenarios when reading, processing or uploading the returned file data, which vary by file type and use case. (Keywords: 'input')
- **Form Rows** — Handles the layout of forms with rows of entries. (Keywords: 'input')
- **Image** — An input for images. (Keywords: 'input')
- **Multiselect** — An input for selecting one or more options from a set. (Keywords: 'input', 'option')
- **Number** — A number input. (Keywords: 'input')
- **Phone Number** — A phone number input. (Keywords: 'input')
- **Radio Bar** — An input for selecting a value from a small number of options. (Keywords: 'input', 'option')
- **Radio List** — An input for selecting a value from a short list of options. (Keywords: 'input', 'option')
- **Select** — An input for selecting an option from a list. (Keywords: 'input', 'option')
- **Search** — An input for search. (Keywords: 'input', 'option')
- **Slider** — An input for selecting a value between a range. (Keywords: 'input')
- **Static Content** — Displays static content, such as text or icons, aligned to a Control Group label or other controls. (Keywords: 'input')
- **Text** — An input for text. (Keywords: 'input')
- **Text Area** — A multi-line input for text. (Keywords: 'input')

## Navigation

- **Anchor Menu** — AnchorMenu organizes related anchor links so users can jump between sections within a page.
- **Breadcrumbs** — Breadcrumbs are used to provide context for where users are in a nested hierarchy and allow direct navigation to parent pages.

## Notifications

- **Message** — Message renders an alert icon with text.
- **Message Bar** — Displays information, warnings or errors in response to system activity.

## Utilities

- **AnimationToggle** — Used to control animation for accessibility and testing. (Keywords: 'utility')
- **Button Group** — Button Group handles the styling for aligning several buttons in a row. Note that this only provides visual styling and does not provide the required a11y semantics. If possible, use [RadioBar](./RadioBar) rather than this component.
- **Clickable** — A base interactive element. Generally, use [Button](./Button) or [Link](./Link) instead. (Keywords: 'utility')
- **Divider** — A non-focusable separator that can be used to provide a horizontal or vertical rule between two sections.
- **Dropdown** — A Dropdown enables you to toggle a component between two display states: open and closed. To use a Dropdown, anchor a page, and then overlay content on the page that you anchored. Where appropriate, use specific components such as [Select](./Select), [Multiselect](./Multiselect) or [Combobox](./Combobox), rather than the generic Dropdown component.
- **Layer** — A low-level utility to render content outside the DOM structure of the parent application. It keeps track of open layers, and ensures that only the most recently opened layer closes on click away or escape. Generally, prefer the [Modal](./Modal) component for dialogs. (Keywords: 'utility', 'portal')
- **Layout** — Utility component that renders a container to lay out children using standard spacing values. This component wraps the `@splunk/themes` [`layout`](../themes/Layout) mixin in a convenient JSX component. (Keywords: 'utility')
- **Menu** — Menu renders a styled list of Items that can be grouped using Headings and Dividers.
- **Popover** — A low level component for overlaying content on the page. As a best practice, use Popover only as a last resort. Other higher level components, such as [Dropdown](./Dropdown) and [Tooltip](./Tooltip), are usually more appropriate, easier to use, and have more built-in accessibility features.
- **Resize** — A utility component that provides resize handles. Borders or background colors can be added to outer constainers or inner content.
- **Screen Reader Content** — Non-visible text that is read out by the user’s screen reader for improved accessibility. (Keywords: 'utility', 'accessibility')
- **Scroll** — A container that handles scrolling through JavaScript. This can be useful for stopping scroll propagation and invoking scroll events externally. (Keywords: 'utility')
- **Scroll Container Context** — Components that need to react to scrolling (for example Dropdown, Select, or Popover) use `window` as the default Scroll Container. Scroll Container Context is used to manage a custom Scroll Container. (Keywords: 'utility')
- **Side Panel** — A Collapsible Panel that enters the page from an edge. (Keywords: 'utility')
- **Sliding Panels** — A utility component that manages sliding and resizing animations between panels of arbitrary content. (Keywords: 'utility')
- **Transition Open** — A container component that animates the transition of its children between an open and closed state. (Keywords: 'utility')
- **Tree** — Tree presents a hierarchical list. (Keywords: 'utility')

## Deprecated

- **Accordion** — An Accordion contains more than one managed Collapsible Panel, where only one panel can be expanded at a time. If you want more precise control of a Collapsible Panel or need to be able to expand multiple panels at a time, see [`Collapsible Panel`](./CollapsiblePanel). It is recommended to use Collapsible Panel's new [`SingleOpenPanelGroup`](./CollapsiblePanel?section=develop#SingleOpenPanelGroup) API for Accordion functionality. Accordion is deprecated and will be removed in a future major version. (Keywords: 'disclosure')
- **Column Layout** — A column layout container. ColumnLayout is deprecated and will be removed in a future major version. Use CSS `grid` or `flex` instead. (Keywords: 'utility')
- **Monogram** — A Monogram is used to represent a named entity. (Keywords: 'monogram')

