Components are the foundational building blocks of the PatternFly design system. They are reusable, well-tested UI elements designed to ensure visual and functional consistency across all your products and applications.
Components integrate with the design system through:
- Foundations and styles: Components strictly adhere to our core design tokens and guidelines.
- Patterns: Components are the building blocks that are combined to implement design patterns.
- Extensions: Components are the basis for the complex, pre-built, reusable code solutions offered by extensions.
How do I use components?
Usage information for specific features, variations, and accessibility details is outlined in each component's design guidelines page.
Component lifecycle
Outside of our standard components, some components are at a different place in their lifecycle:
- Beta components: Under review and open for further evolution.
- Deprecated components: Available for use, but no longer recommended or actively maintained.
For full details on versioning, maintenance, and deprecation timelines, refer to our Releases overview.
Explore components
An about modal displays information about an application, like product version numbers and any appropriate legal text.
An accordion is a vertically stacked list that can be expanded and collapsed to reveal and hide nested content.
An action list is a group of actions, controls, or buttons with built-in spacing.
An alert is a non-intrusive notification that shares brief, important messages with users.
An avatar is a visual representation of a user, which can contain an image or placeholder graphic.
The back to top component is a shortcut that allows users to quickly navigate to the top of a page via a button.
A backdrop is a screen that covers the main content of a page when a modal is opened, to prevent page interaction until the modal is dismissed.
A background image is an image that fills the background of a page.
A badge is an annotation that displays a numeric value.
A banner is a short message that is shared with users in an unobtrusive, full-width container that cannot be dismissed.
A brand is a visual representation of a product—typically its logo.
A breadcrumb is a secondary navigation method that shows where users are in an application, to help them navigate more efficiently.
A button is an object that communicates and triggers an action when it is clicked or selected.
A card is a content container that displays entry-level information—typically within dashboards, galleries, and catalogs.
A chip is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.
Note: The chip component has been deprecated. Our new recommendation is to use the label component instead.
The clipboard copy component allows users to quickly and easily copy content to their clipboard.
A code block contains 2 or more lines of read-only code, which can be copied to a user's clipboard.
A code editor is a versatile Monaco-based text editor that supports various programming languages.
A content component contains a block of styled HTML content.
A data list displays large data sets and interactive content in a flexible layout.
A description list displays terms and their corresponding descriptions.
A divider is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings.
The drag and drop component allows users to reposition, rearrange, and group items into more relevant and appropriate layouts.
A drawer is a sliding panel that enters from outside of the viewport, which can be configured to either overlay content or create a sidebar by pushing content.
A dual list selector displays 2 interactive lists: a list of selected items and a list of available, selectable items. Users can move items between the lists.
An empty state is a screen that is not yet populated with data or information—typically containing a short message and next steps for users.
An expandable section is a content section with a text toggle that reveals content that is hidden by default.
Helper text is a text-based support method that adds additional context to field inputs.
A hint is an in-app message that shares reminders, explanations, or calls to action within a page.
An icon component is a container that supports icons of varying dimensions and styles, as well as spinners.
An inline edit component allows users to switch between read-only and edits views of description lists, page text elements, or tables—within the context of their current view.
An input group combines multiple related controls or inputs to appear as a single control.
When clicked, jump links allow users to navigate to sections within a page without scrolling.
A label is a descriptive annotation that adds context to an element for clarity and convenience.
A list component embeds a formatted list—bulleted or numbered—into page content.
A login page allows a user to access an application by entering a username and password, or by authenticating using a social media login.
A masthead contains and organizes global properties like a logo, navigation, and settings for easy and consistent access across all pages of an application.
A modal is a window that overlays a page to display important information, without requiring users to navigate to a new page.
A navigation component organizes and communicates an application's structure and content in a central location, making it easy to find information and accomplish tasks.
A notification badge is a visual indicator that alerts users about incoming notifications.
A notification drawer contains an application's notifications, which users can view and manage without having to navigate to a new screen.
A number input combines a text input field with buttons to provide users with a quick and effective way to enter and modify a numeric value.
An overflow menu groups a set of actions into a responsive horizontal list to help declutter the UI.
A page component defines the basic layout of a page, with either vertical or horizontal navigation.
A pagination component allows users to navigate through large content views that have been split across multiple pages.
A panel is a customizable container that can contain other components in flexible content layouts.
This demo demonstrates how to create an input field that generates unique passwords.
This demo demonstrates how to validate and display feedback about password strength.
A popover is a small overlay window that provides additional information about an on-screen element.
A progress component is a horizontal bar that indicates the completion status of an ongoing process or task.
A progress stepper displays a timeline of tasks in a workflow and tracks a user's progress through the workflow.
A search input is a type of input field that can be used to search, find, or filter.
A sidebar is a panel that splits content into a secondary area within a page.
A simple list displays selectable items within a page.
A skeleton is a type of loading state that allows you to expose content incrementally.
A skip to content component allows users to bypass navigation when using a screen reader or keyboard
A slider is an interactive element that allows users to quickly set and adjust a numeric value from a defined range of values.
A spinner is an animated visual that indicates when a quick action is in progress.
A switch is a control that toggles the state of a setting between on and off.
A table displays large data sets in a simple grid with column headers.
Tabs group similar content within sub-views of a page.
A text input group is a more custom, flexible, and composable version of a text input that includes elements like icons and buttons.
A tile is a container that allows users to select a static option.
A timestamp is a consistently formatted visual that displays date and time values.
A title component applies top and bottom margins, font-weight, font-size, and line-height to page and section headings.
A toggle group is a set of controls that can be used to quickly switch between actions or states.
A toolbar is a responsive container that displays controls that allow users to manage and manipulate a data set.
A tooltip is a small, temporary, overlay window that provides additional information about an on-screen element.
A tree view is a structure that displays data in a hierarchical view.
A truncate component can be used to shorten character strings—typically when the string overflows its container.
A wizard is a guided workflow that helps users complete complex tasks, create objects, or follow a series of steps.
