Atoms

Status descriptors used to emphasize an item's state.

Buttons indicate actions that users can take, such as adding an item to the cart, submitting a form, and proceeding with an operation.

Checkboxes allow users to toggle an option on or off.

Import

The Incentive component is a badge or seal used to build trust among your potential customers.

Input are text fields used to get user inputs.

Labels describe the meaning of input fields.

The Link component behaves as a regular anchor tag (``), but can be used as any HTML tag.

Lists group related content. They can be ordered or unordered.

Overlays provide contextual information on top of the current layer of the interface. They can be interruptive like modals or augmenting like popovers and tooltips.

Popovers are used along with a clickable trigger element to display contextual information on top of that component.

Prices are used to display the price of a given product, discount and total values.

Radios allow users to select one option from a set.

Select components allow users to pick an option from a predefined list. The Select component should be used when there are more than 5 options available. Otherwise, consider using the Radio Group component.

Skeletons are placeholders that indicate your content data is loading. Skeletons improve the perceived responsiveness of the page and are useful to reduce load-time frustration.

Sliders allow users to select a single value from a range.

Spinners provide a visual cue that an action is being processed.

TextArea components allow users to enter and edit text in a given field.