product | title | githubLabel |
---|---|---|
joy-ui |
React Chip component |
component: chip |
Chip generates a compact element that can represent an input, attribute, or action.
Chips are most frequently used in two main use cases: as pills of informative content or as filtering options.
The badge component is most frequently used to signal status (online, offline, busy, etc) and whether there's notifications or not.
{{"demo": "ChipUsage.js", "hideToolbar": true, "bg": "gradient"}}
:::success To learn how to add more variants or sizes to the component, check out the Themed components page. :::
{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
After installation, you can start building with this component using the following basic elements:
import Chip from '@mui/joy/Chip';
export default function MyApp() {
return <Chip>My chip</Chip>;
}
Chips comes with medium size, primary color, and solid variant set by default.
{{"demo": "BasicChip.js"}}
Use the startDecorator
and/or endDecorator
props to add supporting icons to the chip.
{{"demo": "ChipWithDecorators.js"}}
To add a delete action inside a chip, use the complementary ChipDelete
component.
Note that its design will automatically adapt to the parent Chip
.
import ChipDelete from '@mui/joy/ChipDelete';
{{"demo": "DeleteButtonChip.js"}}
You can also use the chip component as a link by assigning a value of a
to the component
prop.
Since links are the most appropriate component for navigating through pages, that's useful when you want the same chip design for a link.
Doing so will automatically change the rendered HTML tag from <div>
to <a>
.
{{"demo": "LinkChip.js"}}
To make chips clickable, pass a function to the onClick
prop.
{{"demo": "ClickableChip.js"}}
Use both the onClick
prop and the complementary ChipDelete
component to make a chip support two actions.
{{"demo": "ClickableAndDeletableChip.js"}}
Common to filtering UIs, wrap the Radio
component with the Chip
to use them together.
Use radios when you want to enable single selection.
{{"demo": "RadioChip.js"}}
Similar to the above, wrap the Checkbox
component with the Chip
to use them together.
Use checkboxes when you want to enable multiple selection.
{{"demo": "CheckboxChip.js"}}
Play around with all the CSS variables available in the slider component to see how the design changes.
You can use those to customize the component on both the sx
prop and the theme.
{{"demo": "ChipVariables.js", "hideToolbar": true}}