Component Catalog

Table of Contents on this section.

Animations:

Ripple

Small and lightweight component which is used to show ripple animation when click or touch event occured.

Transition Effect

A Transition animations effect that will make an UI feel great.

Buttons:

Button

A component for actions in form, dialog, and more. Includes support for a handful of color variations, sizes, states, and more.

Toggle Button

A group of buttons with toggle capabilities. It is primarily used to visualize choices with different approaches.

Chips:

Chip

A component which is used to convey small pieces of information to create arbitrary items, like categories or tags.

Chip Group

A component which extends the BsChip's component by providing groupable functionality. It is used for creating groups of selections using chips.

Container:

App

A lightweight components which is used as layout container for your application.

Appbar

A lightweight component which is placed at the top of the page as a container for page title, logo, menus, and action buttons.

Card

A flexible and extensible content container. It includes sub-component for headers, footers, and content with variety background colors, and powerful display options.

Side Drawer

A lightweight component's container which may contains application navigation, logo and others.

Elements:

Alert

A component that provides contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Avatar

A component which are typically used to display a user profile as a picture, icon, or short text.

Badge

A lightweight component which can be used for adaptive tagging such as adding context to just about any content.

Breadcrumbv2.1.0

A component that indicate the current page's location within a navigational hierarchy.

Divider

Small and lightweight component which is primarily used to separate content within lists or layouts.

Dropdown Menu

A popup container which are typically used for displaying lists of links and actions in a dropdown menu style.

Image Holder

A lightweight component which is primarily used to create SVG shape to visualize image placeholder.

List Tile

A component used to display information. It can contain an image, content, actions, subheaders and much more. BsListTile represents content in such a way which makes it easy to identify a specific item in a collection.

Subheader

Small and lightweight component which is used as lists title.

Icons:

Icon

Small and lightweight component which can be used inside almost any component or html element and the icon is loaded from Google Material Symbols dynamically.

Icon Font Awesomev2.1.0

Small and lightweight component which can be used inside almost any component or html element and the icon is loaded from Font Awesome dynamically.

Icon Spinnerv2.0.0

An icon component that is normally used for displaying loading indicator.

Icon SVGv2.0.0

A lightweight component which is primarily used to embed SVG icon inline inside an html element and the SVG icon is loaded from Google Material Symbols dynamically.

Toggle Icon

Small and lightweight component which is used to toggle two different icon. It can be used inside almost any component or html element.

Input Controls:

Checkbox

A component that let users select one or more items from a list, or turn an item on or off.

Radio Button

A component that let users select one option from a set of options.

Switch

A component that let users toggle the selection of an item on or off.

Text Field

A component that let users enter text into an UI.

TextArea Field

A component that let users enter a large amounts of text into an UI.

Numeric Field

A component that let users enter numeric text into an UI.

Chip Field

A component that let users enter arbitrary items, like categories or tags into an UI to convey a small pieces of information.

Listboxv2.0.0

A component that let users select one or more items from a displayed list.

Combobox

A form field component that let users select one or more items from a dropdown displayed list.

DateTime Field

A fully featured date selection component that let users select a date, time, month, year, or datetime.

Toggle Field

A form field component with a group of buttons with toggle capabilities and validation. It is primarily used to visualize choices with different approach.

Navigation:

List Nav

A component used for displaying a series of item and mainly used for navigation. It can contain an icon, nested items, and provides a consistent styling for organizing the items.

Tabs

A component used for creating a pseudo-navigation for a page.

Overlays:

Lighbox

A modal image gallery component that is used to display a collection of images.

Mask Loader

A component which are typically used for displaying a loading progress with backdrop overlay.

Modal

A popup dialog component that brings information to the user. It also provides actions through the action buttons to prompt the user for input or to ask for a decision.

Notification

A lightweight push notification component that display a notification message to user.

Overlay

A lightweight component for displaying a backdrop overlay.

Popover

A lightweight component which is used as a popup container.

Tooltip

A component which is useful for conveying information when user hovers over an element.

Pickers:

Color Pickerv2.0.0

A component that allow users to select a color using a variety of input methods.

Date Picker

A component that generates a calendar style date selection widget.

Progress Control:

Progresss

A component which are typically used to visualize the data loading progress.

Progress Barv2.0.0

Bootstrap progress bar component featuring support for animated background and text labels which are typically used for displaying simple progress bar.