Overview
Accordion
An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
Avatar
The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
Badge
The badge component is used to display a small amount of information to the user.
Breadcrumb
A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application.
Button
Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
Button Group
Group a series of buttons together on a single line with the button group, and super-power.
Chip
Circular Progress
A circular progress indicator is a visual representation of progress toward a specific goal.
Clock
Displays the current time in a given timezone.
function helloWorld() {
console.log('Hello, world!');
}Code Highlighter
Highlights code snippets with syntax highlighting and line numbers.
Date Picker
The Date Picker component is used to capture date user input.
Divider
The divider component is used to visually separate content.
Elevation
Adds elevation to an element.
Icon
Icons are visual symbols used to represent ideas, objects, or actions.
Icon Button
Icon buttons allow users to take actions, and make choices, with a single tap.
Input
The Input component is used to capture user input.
Linear Progress
A linear progress indicator is a visual representation of progress toward a specific goal.
Link
The link component is used to navigate to a new page or section within the current page.
Number Counter
Displays a number with commas for thousands.
Number Field
The Number Field component is used to capture numeric user input.
Switch
Captures boolean input with an on/off switch interaction.
Tag
Tag component for displaying labels or values with optional dismiss functionality.
Textarea
The Textarea component is used to capture user input.
Time Picker
The Time Picker component is used to capture time user input.
Tooltip
Displays a tooltip for an element.
The footer component provides a container for displaying additional navigation information about a site.
HTML Editor
HTML Editor component is a WYSIWYG editor that allows users to edit HTML content.
Typography are used for rendering headlines, paragraphs and captions.
IconButton
Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
Calendar
The calendar component is used to display information in a daily, weekly, monthly, or category view.
Chart Doughnut
A doughnut chart is a circular chart with a blank center. The chart is similar to a pie chart with the center cut out. The area in the center can be used to display information.
Chart Pie
A pie chart (also known as a circle chart) is a circular statistical graphic that visually represents numerical proportions. It is commonly used to illustrate how parts relate to the whole for a specific categorical variable.
Code Editor
A browser based code editor.
Dropdown
Enables native inputs to be used within a Form field.
Empty State
A message that displays when there is no information to display.
Form Control
The Form Control component adds a label and caption for its child control.
Header
Header component is used to display a header with a brand, navigation, and actions.
Input
Enables native inputs to be used within a Form field.
Menu
Menus display a list of choices on temporary surfaces.
Modal
Modals are used to display content in a layer above the app.
Notification
Notifications are messages that communicate information to the user.
Notification Manager
The Notification Manager handles the organization and display of notifications within the application.
Popover
The Popover component is used to display additional information.
Select
Allows the user to select one or more options using a dropdown.
Slider
Sliders allow users to make selections from a range of values.
Table
A configurable component for displaying tabular data.
Tabs
The tabs component is used to display multiple panels of content in a container.
Textarea
Enables native inputs to be used within a Form field.
Tree View
A tree view is a hierarchical structure that provides nested levels of navigation.
A condition builder is a component that allows users to build a condition using a set of rules.
Canvas
Canvas for drawing lines and shapes on.
Flow Designer
Flow Designer is a component that allows users to create and edit flows.
Input URL
A specialized input field for URL validation.