Components are the reusable building blocks of our design system.
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.
Badges are used to inform merchants of the status of an object or of an action that’s been taken.
Tables are used to organize and display information.
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.
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 slider 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.
Breadcrumbs component are a navigation system show hierarchy and navigational context for a user’s location within an app.
Navbars allow users to 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.
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.
Utilities for controlling the displaying related images and text with the figure element.
Focus ring is an utility classes that allows you to add and modify custom focus ring styles to elements and components.
Quickly create stylized hyperlinks with Bootstrap Icons or other icons.
Utilities for controlling images.
Layout are build page layouts with 2 columns.
Links allow users to navigate to a different location.
Stretched link allow users to navigate to a different location on overlay elements.
