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.

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 Placeholder

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:

FontAwesome Iconv2.1.0

Small and lightweight component which can be used inside almost any component or html element. The component loads Font Awesome free icons dynamically.

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.

Spinner Iconv2.0.0

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

SVG Iconv2.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.

Chip Field

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

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.

Listboxv2.0.0

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

Numeric Field

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

Radio Button

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

Search Field

A component that let users enter search keyword into an UI.

Switch Button

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

Text Field

A form field component that let users enter text into an UI.

TextArea Field

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

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:

Breadcrumbv2.1.0

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

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 Controls:

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.