Components
Components are the reusable building blocks used to create consistent and efficient user interfaces. Each component encapsulates a specific piece of functionality or design, such as buttons, forms, or navigation elements. By using predefined components, user interfaces can be quickly assembled that adhere to the design system standards and ensure a uniform look and feel across all digital products.
Components are designed to be versatile and flexible, allowing them to be combined in various ways to meet the needs of different projects. With accessibility built into each component, they promote inclusivity and usability for all users.
Component Status
There are currently 46 components under consideration for the design system.
Component | Figma Library | Local HTML | Global HTML | React |
---|---|---|---|---|
Accordion | considering | stable | considering | considering |
Actions | considering | stable | considering | considering |
Back Link | considering | stable | considering | considering |
Blockquote | considering | stable | beta | beta |
Breadcrumbs | considering | stable | considering | considering |
Button | considering | stable | beta | beta |
Button Group | considering | stable | considering | considering |
Card | considering | considering | beta | beta |
Checkbox | considering | stable | beta | beta |
Chip | considering | stable | alpha | alpha |
ComboBox | considering | considering | alpha | alpha |
Container | considering | considering | beta | beta |
Cookie Banner | considering | stable | alpha | alpha |
Details | considering | stable | considering | considering |
Error Summary | considering | stable | considering | considering |
File Upload | considering | stable | beta | beta |
Footer | considering | stable | beta | beta |
Header | considering | stable | beta | beta |
Heading | considering | stable | beta | beta |
Icon | considering | considering | stable | stable |
Icon Button | considering | stable | beta | beta |
Label | considering | stable | beta | beta |
Link | considering | stable | stable | stable |
List | considering | stable | beta | beta |
Modal | considering | stable | alpha | alpha |
Notification Panel | considering | stable | considering | considering |
Pagination | considering | stable | considering | beta |
Panel | considering | stable | considering | considering |
Paragraph | considering | stable | stable | stable |
Phase Banner | considering | stable | stable | stable |
Progress Stepper | considering | stable | considering | considering |
Radio Button | considering | stable | beta | beta |
Section Break | considering | stable | beta | beta |
Select | considering | stable | beta | beta |
Spinner | considering | not-available | beta | beta |
Step by Step Navigation | considering | stable | considering | considering |
Summary List | considering | stable | considering | considering |
Table | considering | stable | considering | considering |
Tabs | considering | stable | beta | beta |
Tag | considering | stable | stable | stable |
Task List | considering | stable | considering | considering |
Text Input | considering | stable | beta | beta |
Textarea | considering | stable | beta | beta |
Tick | considering | stable | considering | considering |
Tooltip | considering | stable | considering | considering |
Warning Text | considering | stable | considering | considering |