logo

Lumina Design

ComponentsIcons
Installation
AccordionAppHeaderAutoCompleteAvatarBottomNavigationBreadcrumbButtonCarouselCheckboxChipColumnDataTableDatePickerDialogFloatingButtonFloatingMenuInputFieldLinkMenuDropdownNextToastProviderProgressRadioButtonRangeSliderResizablePanelSelectDropDownSideBarTabSelectTabsTagTextTextAreaThemeProviderToastProviderToggleInputToggleSwitchTooltip

Chip

The Chip component is a compact and flexible UI element used to display information such as tags, selections, or actions. Chips can include text, icons, or even avatars, making them versatile for various scenarios. They are often used in tagging systems, such as email categorization, search filters, or multi-select fields where the user's selections need to be visually displayed. In a project management tool, for instance, chips could represent different task statuses or labels applied to tasks.

Label×
Label×

Code

import Chip from "@lumina-design/core/Chip";
    
<Chip
  onClose={() => console.log("HANDLE CHIP CLOSE")}
  icon={<i className="fas fa-thumbs-up" />}
  dismissable={true}
  color="white"
>
  Label
</Chip>