# Components

Presentational user interface components such as buttons, form elements and overlays. Browse all components or select a specific category.

[Accordion](/components/web/accordion/accordion.guidelines)

[A stacked set of interactive items that you can click to show more information. Each item can be either collapsed or expanded to reveal the complete content.](/components/web/accordion/accordion.guidelines)

[Action banner](/components/web/action-banner/action-banner.guidelines)

[A versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element.](/components/web/action-banner/action-banner.guidelines)

[Action Menu](/components/web/action-menu/action-menu.guidelines)

[Enable users to trigger actions from a list in a popover when space is limited.](/components/web/action-menu/action-menu.guidelines)

[Avatar](/components/web/avatar/avatar.guidelines)

[A graphical representation of a user or entity - usually a photo or initials](/components/web/avatar/avatar.guidelines)

[Badge](/components/web/badge/badge.guidelines)

[A static label that highlights an item's status.](/components/web/badge/badge.guidelines)

[Banner](/components/web/banner/banner.guidelines)

[A prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application.](/components/web/banner/banner.guidelines)

[Box](/components/web/box/box.guidelines)

[A utility component for working with spacing.](/components/web/box/box.guidelines)

[Button](/components/web/button/button.guidelines)

[A clickable element which communicates that users can trigger an action.](/components/web/button/button.guidelines)

[Button group](/components/web/button-group/button-group.guidelines)

[A layout component used to group multiple related actions a user can take.](/components/web/button-group/button-group.guidelines)

[Callout](/components/web/callout/callout.guidelines)

[Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.](/components/web/callout/callout.guidelines)

[Card](/components/web/card/card.guidelines)

[A styled container that groups related content and actions.](/components/web/card/card.guidelines)

[Checkbox](/components/web/checkbox/checkbox.guidelines)

[A form element that enables users to make a binary choice (checked/unchecked).](/components/web/checkbox/checkbox.guidelines)

[Checkbox group](/components/web/checkbox-group/checkbox-group.guidelines)

[A form element that enables users to select multiple values from a list of options.](/components/web/checkbox-group/checkbox-group.guidelines)

[Chip](/components/web/chip/chip.guidelines)

[New: New](/components/web/chip/chip.guidelines)

[A compact, interactive control for suggesting, selecting, or representing an entered value.](/components/web/chip/chip.guidelines)

[Choice tiles](/components/web/choice-tiles/choice-tiles.guidelines)

[Enable users to select a single value from a list of choices that support more complex content than regular radio buttons.](/components/web/choice-tiles/choice-tiles.guidelines)

[Coach mark](/components/web/coach-mark/coach-mark.guidelines)

[A Popover that guides users step-by-step through key aspects of new features.](/components/web/coach-mark/coach-mark.guidelines)

[Code input](/components/web/code-input/code-input.guidelines)

[A numeric code input rendered as individual cells, for passcodes, one-time passwords (OTP) and authenticator (TOTP) codes.](/components/web/code-input/code-input.guidelines)

[Copyable](/components/web/copyable/copyable.guidelines)

[A button that allow users to quickly and easily copy content to their clipboard.](/components/web/copyable/copyable.guidelines)

[Count](/components/web/count/count.guidelines)

[A static label that indicates the quantity of items.](/components/web/count/count.guidelines)

[Currency input](/components/web/currency-input/currency-input.guidelines)

[An enhanced input field that provides visual and non-visual cues to a user when entering an amount of money in a specified currency.](/components/web/currency-input/currency-input.guidelines)

[Data list](/components/web/data-list/data-list.guidelines)

[Warning: Lab](/components/web/data-list/data-list.guidelines)

[A versatile and accessible utility component for rendering lists of data. It provides features such as keyboard navigation, infinite scrolling, and customizable rendering.](/components/web/data-list/data-list.guidelines)

[Date input](/components/web/date-input/date-input.guidelines)

[New: New](/components/web/date-input/date-input.guidelines)

[Enable users to input a date — either in a textfield or with a date picker.](/components/web/date-input/date-input.guidelines)

[Date picker](/components/web/date-picker/date-picker.guidelines)

[A form element used to select a single or a range of dates.](/components/web/date-picker/date-picker.guidelines)

[Drawer](/components/web/drawer/drawer.guidelines)

[A panel that slides out from the edge of the screen to focus a user's attention on completing a task or viewing details about an item.](/components/web/drawer/drawer.guidelines)

[Empty state](/components/web/empty-state/empty-state.guidelines)

[Used when there is no data to display to describe what the user can do next. Empty state provides explanation and guidance to help user progress.](/components/web/empty-state/empty-state.guidelines)

[Feature Tip](/components/web/feature-tip/feature-tip.guidelines)

[Used to help users learn about new or unfamiliar interface features.](/components/web/feature-tip/feature-tip.guidelines)

[Fieldset](/components/web/fieldset/fieldset.guidelines)

[A wrapper for related form fields. Used to separate form content with a label and spacing.](/components/web/fieldset/fieldset.guidelines)

[File drop](/components/web/file-drop/file-drop.guidelines)

[Utility component that lets users upload files by dragging and dropping the files into an area on a page, or activating a button.](/components/web/file-drop/file-drop.guidelines)

[File input](/components/web/file-input/file-input.guidelines)

[Utility component that allow users to select a file(s) from the file system.](/components/web/file-input/file-input.guidelines)

[Filter menu](/components/web/filter-menu/filter-menu.guidelines)

[A component used to apply category-specific filters for a dataset.](/components/web/filter-menu/filter-menu.guidelines)

[Filter results](/components/web/filter-results/filter-results.guidelines)

[Used to reflect the amount of results given a set of applied filters. It's also used to allow users to clear all filters.](/components/web/filter-results/filter-results.guidelines)

[Filters layout](/components/web/filters-layout/filters-layout.guidelines)

[A composable and responsive layout component for filters](/components/web/filters-layout/filters-layout.guidelines)

[Flex](/components/web/flex/flex.guidelines)

[New: New](/components/web/flex/flex.guidelines)

[A utility component for creating flex layouts](/components/web/flex/flex.guidelines)

[Footer](/components/web/footer/footer.guidelines)

[New: New](/components/web/footer/footer.guidelines)

[A footer bar for actions, pinned to the bottom of a page or panel.](/components/web/footer/footer.guidelines)

[Form control](/components/web/form-control/form-control.guidelines)

[Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.](/components/web/form-control/form-control.guidelines)

[Help popover](/components/web/help-popover/help-popover.guidelines)

[An icon button with a question mark that reveals help information on click or tap.](/components/web/help-popover/help-popover.guidelines)

[Icon button](/components/web/icon-button/icon-button.guidelines)

[Enables users to control the visibility of other UI elements.](/components/web/icon-button/icon-button.guidelines)

[Inline](/components/web/inline/inline.guidelines)

[A utility component for controlling horizontal layouts.](/components/web/inline/inline.guidelines)

[Input](/components/web/input/input.guidelines)

[A form element that enables users to enter a single line of text.](/components/web/input/input.guidelines)

[Link](/components/web/link/link.guidelines)

[Text that navigates the user from one page to another.](/components/web/link/link.guidelines)

[List](/components/web/list/list.guidelines)

[A set of text objects in a bulleted or numbered format.](/components/web/list/list.guidelines)

[List item](/components/web/list-item/list-item.guidelines)

[A versatile element that can display information in a clear and organized manner.](/components/web/list-item/list-item.guidelines)

[Listbox](/components/web/listbox/listbox.guidelines)

[A listbox provides a way to select or reorder options in a predefined list and a selected option can then be made to perform a single action.](/components/web/listbox/listbox.guidelines)

[Loading](/components/web/loading/loading.guidelines)

[A component used as a placeholder when content is not yet available or to indicate that an action is being processed.](/components/web/loading/loading.guidelines)

[Modal](/components/web/modal/modal.guidelines)

[A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.](/components/web/modal/modal.guidelines)

[Modal Split](/components/web/modal-split/modal-split.guidelines)

[Modal split is a focused-experience, introduced as an overlay to explain to customers concepts or actions within the product.](/components/web/modal-split/modal-split.guidelines)

[Page](/components/web/page/page.guidelines)

[Information:](/components/web/page/page.guidelines)

[A collection of components which let you compose a page in our web application.](/components/web/page/page.guidelines)

[Phone input](/components/web/phone-input/phone-input.guidelines)

[Warning: Lab](/components/web/phone-input/phone-input.guidelines)

[Used to collect phone numbers with international dial codes. It contains a dropdown which allows the user to choose from a list of countries and dial codes.](/components/web/phone-input/phone-input.guidelines)

[Pleo logo](/components/web/pleo-logo/pleo-logo.guidelines)

[The horizontal Pleo wordmark, drawn as an inline SVG in the brand logo colour.](/components/web/pleo-logo/pleo-logo.guidelines)

[Popover](/components/web/popover/popover.guidelines)

[A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page.](/components/web/popover/popover.guidelines)

[Progress bar](/components/web/progress-bar/progress-bar.guidelines)

[A component used to represent the completion of a task or to visualize different states that are relevant to the user.](/components/web/progress-bar/progress-bar.guidelines)

[Promotional Banner](/components/web/promotional-banner/promotional-banner.guidelines)

[Displays an important, succinct, promotional message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.](/components/web/promotional-banner/promotional-banner.guidelines)

[Radio group](/components/web/radio-group/radio-group.guidelines)

[A form element that enables users to select a single value from a list of options.](/components/web/radio-group/radio-group.guidelines)

[Search](/components/web/search/search.guidelines)

[An input that allow users to find content by entering a search term.](/components/web/search/search.guidelines)

[Segmented control](/components/web/segmented-control/segmented-control.guidelines)

[A hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views.](/components/web/segmented-control/segmented-control.guidelines)

[Select](/components/web/select/select.guidelines)

[A form element that enables users to select a single or multiple values from a list of options.](/components/web/select/select.guidelines)

[Skeleton](/components/web/skeleton/skeleton.guidelines)

[Replaces content with a placeholder of the same shape to indicate a loading state.](/components/web/skeleton/skeleton.guidelines)

[Slider](/components/web/slider/slider.guidelines)

[A form control for choosing a value within a preset range of values.](/components/web/slider/slider.guidelines)

[Sortable List](/components/web/sortable-list/sortable-list.guidelines)

[A component that lets users customize the order of list items.](/components/web/sortable-list/sortable-list.guidelines)

[Spinner](/components/web/spinner/spinner.guidelines)

[A component used as a placeholder when content is not yet available or to indicate that an action is being processed.](/components/web/spinner/spinner.guidelines)

[Stack](/components/web/stack/stack.guidelines)

[A utility component for controlling vertical layouts.](/components/web/stack/stack.guidelines)

[Steps](/components/web/steps/steps.guidelines)

[An interactive representation of a user’s progress through a series of discrete steps, with the Wizard component as its non-interactive counterpart.](/components/web/steps/steps.guidelines)

[Suggestion bar](/components/web/suggestion-bar/suggestion-bar.guidelines)

[A list of buttons shown below an input field that when clicked updates the input value](/components/web/suggestion-bar/suggestion-bar.guidelines)

[Switch](/components/web/switch/switch.guidelines)

[A control used to switch between two states - often on or off.](/components/web/switch/switch.guidelines)

[Table](/components/web/table/table.guidelines)

[A component for displaying large amounts of data in rows and columns.](/components/web/table/table.guidelines)

[Tabs](/components/web/tabs/tabs.guidelines)

[Tabs are labeled controls that allow users to switch between multiple views within a page.](/components/web/tabs/tabs.guidelines)

[Tag](/components/web/tag/tag.guidelines)

[A static label that highlights an item's category or attribute.](/components/web/tag/tag.guidelines)

[Text](/components/web/text/text.guidelines)

[A primitive component that can be used to create all kinds of text styles.](/components/web/text/text.guidelines)

[Textarea](/components/web/textarea/textarea.guidelines)

[A form element that enables users to enter text on multiple lines.](/components/web/textarea/textarea.guidelines)

[Toast](/components/web/toast/toast.guidelines)

[Give users short, non-disruptive feedback on the outcome of an action.](/components/web/toast/toast.guidelines)

[Tooltip](/components/web/tooltip/tooltip.guidelines)

[A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.](/components/web/tooltip/tooltip.guidelines)

[Wizard](/components/web/wizard/wizard.guidelines)

[A non-interactive representation of a user’s progress through a series of discrete steps, with the Steps component as its interactive counterpart.](/components/web/wizard/wizard.guidelines)