Skip to main content
🏠ComponentsVersion: 2.0.0-beta.7

Quantum components

AlertAlerts display brief, temporary notifications. They are non-disruptive to a user's experience and do not require an action to be taken.
Docusaurus themed imageDocusaurus themed image
figma

BreadcrumbBreadcrumb show a user's location in a site or app.
Docusaurus themed imageDocusaurus themed image
figma

ButtonButtons are the primary components for displaying actions on a page.
Docusaurus themed imageDocusaurus themed image
figma

DatatableThe `Datatable` component is a versatile component for displaying tabular data.
Docusaurus themed imageDocusaurus themed image
figma

DividerDividers help you bring rythm and clarity to your interfaces by separating elements.
Docusaurus themed imageDocusaurus themed image
figma

DrawerNavigation drawers provide access to destinations in your app.
Docusaurus themed imageDocusaurus themed image
figma

DropdownA dropdown menu displays a list of actions or options to a user.
Docusaurus themed imageDocusaurus themed image
figma

GridA grid is a structured framework that helps align and organize elements on a layout.
Docusaurus themed imageDocusaurus themed image
figma

HeaderA header defines the top of a page.
Docusaurus themed imageDocusaurus themed image
figma

MenuElement that presents a list of navigation or action options to facilitate user interaction.
Docusaurus themed imageDocusaurus themed image
figma

ModalModal dialogs focus the user’s attention exclusively on one thing via a window that sits on top of the page content.
Docusaurus themed imageDocusaurus themed image
figma

Progress BarA progress bar is a progress indicator, either derminate or indeterminate.
Docusaurus themed imageDocusaurus themed image
figma

Progress CircleA progress circle is a progress indicator, either determinate or indeterminate .
Docusaurus themed imageDocusaurus themed image
figma

Split ButtonSplit Buttons are dual-function menu buttons that offers alternative primary actions.
Docusaurus themed imageDocusaurus themed image
figma

TabsTabs organize content by grouping similar information on the same page.
Docusaurus themed imageDocusaurus themed image
figma

TagTags allow users to categorize, label or organise content using keywords.
Docusaurus themed imageDocusaurus themed image
figma

TooltipTooltip’s are floating, non-actionable labels used to explain a user interface elements or features.
Docusaurus themed imageDocusaurus themed image
figma

TypographyTypography is the art and technique of arranging type to enhance readability and visual communication in design.
Docusaurus themed imageDocusaurus themed image
figma