Components
actions
Button
Buttons allow users to perform an action or to navigate to another page, with a single tap.
Button Group
Button group component is a grouping of buttons gives users access to frequently performed, related to each other actions.
Close Button
A close button used for dismissing content like modals and alerts.
data-display
Avatar
Avatar component is a visual representation of an entity, such as a user or an organization.
Avatar Group
Avatar group component displays a number of avatars grouped together in a stack.
Badge
Badge component is a visual indicator for numeric values such as tallies and scores.
Lozenge
Lozenge is a visual indicator used to highlight an item's status for quick recognition.
Table
Tables are used to organize and display information.
Tag
Tags allow users to label, categorize or organize content to describe them.
feedback
Alerts
Alerts is flash messages that shows contextual feedback messages for attracts the user's attention without interrupting the user's task.
Modal
Modals are overlays that display content in a layer above the page requires user interaction.
Placeholders
Placeholders used for loading placeholders for your content before the data gets loaded on the page.
Popover
Popovers are containers used to display transient content such as menus, options, additional actions, and more in an overlay.
Progress bar
Progress bar indicators commonly known as spinners, express an unspecified wait time or display the length of a process.
Progress Indicator
Progress indicator shows the position of the current screen in a list of screens.
Progress Tracker
Progress tracker displays a user’s steps and progress through a set of steps.
Rating
Rating provides rating to an item or experience,and can allow the user to submit a rating of their own.
Spinner
Spinner is an animated spinning icon that lets users know content is being loaded.
Toast
Toasts display brief, temporary notifications for users on the outcome of an action.
Tooltip
Tooltips is a floating, non-actionable label show contextual help or specific feature when a user hovers or focuses on an element.
Validation
Validation provide a valuable, actionable feedback to your users with HTML5 form validation.
inputs
Checkbox
Checkboxs allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
Dropdown
Dropdown displays a list of actions or options allows the user to select one.
Floating Label
Floating label display the type of input in floating over an input fields.
Form
Form element allows users to input information.
Input Group
Input group allows users to grouping related form controls in a single input.
Radio
Radio group allows users to select only one option from a number of choices.
Range
Range component lets users choose a numeric value from the given values on a slider.
Select Input
Select input allows users to make a single selection or multiple selections from a list of options in a limited space.
Switch
Switches allow users to turn an individual option on or off.
Text field
Text fields allow users to input custom text entries with a keyboard.
misc
Layout
Layout are build page layouts with 2 columns.
navigation
Breadcrumb
Breadcrumbs component are a navigation system show hierarchy and navigational context for a user’s location within an app.
Menu
Menus allows users take one action from a list of options, configure settings, and more.
Navbar
Navbars are allows users quickly navigate the entire content of a product or a section of the application.
Offcanvas
Offcanvas is a hidden sidebar on the page used for navigation, shopping carts, etc.
Pagination
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
Pills
Pills allows users navigate to another pages or switch to another content on the same page.
Scrollspy
Scrollspy plugin allows automatically scroll into the particular element in the viewport.
Side Navigation
Side navigation allows users navigate to another pages or sections on the left or right side of a page.
Stretched Link
Stretched link allow users to navigate to a different location on overlay elements.
Tabs
Tabs organize content into multiple sections on the same page and allow users to navigate between them.
surfaces
Accordion
Accordion component allows the user to show and hide sections of related content on a page.
Blankslate
Blankslates are used as placeholders when there is a lack of content within a page or section.
Card
Cards used to group similar information into flexible containers to let users to browse a collection of related items and actions.
Carousel
Carousel are slideshow for cycling through multiple elements such as images, videos, or text.
Collapse
Collapse are expansion panel allows users can expand or collapse the long sections of information.
List Group
List gorup used for displays a continuous group of text or images.