📄️ Accordion
Accordions display an expandable/collapsible list of items. The final Accordion component is a compound of the following:
📄️ Alert
Alerts display short messages related to the behavior of a system, feature or page.
📄️ Banner
Banners are used for advertising brands, products, and/or collections. They comprise an image, some text content, and a call-to-action button. The final Banner component is a compound of the following:
📄️ Breadcrumb
Breadcrumbs indicate the user's location in a website hierarchy, facilitating the navigation to previous page levels.
📄️ Bullets
The Bullets component displays a set of bullets, which allow users to alternate between different screens.
📄️ Card
Cards are used to present content and actions related to a single topic.
📄️ Carousel
Carousels are a set of rotating banners. They contain navigational controls which allow users to alternate between multiple images and content in the same section.
📄️ Form
Forms contain interactive components that are used to collect user input.
📄️ IconButton
Icon Buttons are icons that trigger some sort of action, such as adding an item to the cart.
📄️ LoadingButton
Loading Buttons are used to disable interactions or provide a visual cue that an action is being processed.
📄️ Modal
Modals are dialog windows that sit on top of an application's main view. Once a Modal is open, interactions with the content behind it are blocked.
📄️ PaymentMethods
The PaymentMethods component displays the logos of the available payment options in a store.
📄️ PriceRange
The Price Range component is a slider that allows users to select a maximum and minimum price from a range.
📄️ ProductCard
ProductCard displays summarized information about a product.
📄️ QuantitySelector
The QuantitySelector component allows customers to select the quantity of a given product to purchase.
📄️ RadioGroup
The Radio Group component allows users to select a single option from a list of two or more mutually exclusive options.
📄️ SearchInput
The Search Input component allows users to enter an input and query results from a database.
📄️ Table
Tables display information in a friendly way, allowing users to scan for details quickly. The Table component is a compound of the following: