Components

Buttons allow users to perform an action or to navigate to another page, with a single tap.

Button group component is a grouping of buttons gives users access to frequently performed, related to each other actions.

A close button used for dismissing content like modals and alerts.

Avatar component is a visual representation of an entity, such as a user or an organization.

Avatar group component displays a number of avatars grouped together in a stack.

Badge component is a visual indicator for numeric values such as tallies and scores.

Lozenge is a visual indicator used to highlight an item's status for quick recognition.

Tables are used to organize and display information.

Tags allow users to label, categorize or organize content to describe them.

Alerts is flash messages that shows contextual feedback messages for attracts the user's attention without interrupting the user's task.

Modals are overlays that display content in a layer above the page requires user interaction.

Placeholders used for loading placeholders for your content before the data gets loaded on the page.

Popovers are containers used to display transient content such as menus, options, additional actions, and more in an overlay.

Progress bar indicators commonly known as spinners, express an unspecified wait time or display the length of a process.

Progress indicator shows the position of the current screen in a list of screens.

Progress tracker displays a user’s steps and progress through a set of steps.

Rating provides rating to an item or experience，and can allow the user to submit a rating of their own.

Spinner is an animated spinning icon that lets users know content is being loaded.

Toasts display brief, temporary notifications for users on the outcome of an action.

Tooltips is a floating, non-actionable label show contextual help or specific feature when a user hovers or focuses on an element.

Validation provide a valuable, actionable feedback to your users with HTML5 form validation.

Checkboxs allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

Dropdown displays a list of actions or options allows the user to select one.

Floating label display the type of input in floating over an input fields.

Form element allows users to input information.

Input group allows users to grouping related form controls in a single input.

Radio group allows users to select only one option from a number of choices.

Range component lets users choose a numeric value from the given values on a slider.

Select input allows users to make a single selection or multiple selections from a list of options in a limited space.

Switches allow users to turn an individual option on or off.

Text fields allow users to input custom text entries with a keyboard.

Layout are build page layouts with 2 columns.

Breadcrumbs component are a navigation system show hierarchy and navigational context for a user’s location within an app.

Menus allows users take one action from a list of options, configure settings, and more.

Navbars are allows users quickly navigate the entire content of a product or a section of the application.

Offcanvas is a hidden sidebar on the page used for navigation, shopping carts, etc.

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Pills allows users navigate to another pages or switch to another content on the same page.

Scrollspy plugin allows automatically scroll into the particular element in the viewport.

Side navigation allows users navigate to another pages or sections on the left or right side of a page.

Stretched link allow users to navigate to a different location on overlay elements.

Tabs organize content into multiple sections on the same page and allow users to navigate between them.

Accordion component allows the user to show and hide sections of related content on a page.

Blankslates are used as placeholders when there is a lack of content within a page or section.

Cards used to group similar information into flexible containers to let users to browse a collection of related items and actions.

Carousel are slideshow for cycling through multiple elements such as images, videos, or text.

Collapse are expansion panel allows users can expand or collapse the long sections of information.

List gorup used for displays a continuous group of text or images.