Overview
The Chip component displays compact information such as tags, labels, categories, or status indicators with customizable styling.
Basic Usage
import Chip from '@newtonschool/grauity';
function MyComponent() {
return (
<Chip variant="brand" size="medium">
Label
</Chip>
);
}
Visual variant of the chip.Available choices: brand, success, error, warning, yellow, purple, disabled, action-brand, action-success, action-error, action-warning, action-yellow, action-purple
Size of the chip.Available choices: small, medium, large, extra-large
Add a border to the chip.
Make the chip fully rounded (pill shape).
icon
grauityIconName
default:"null"
Icon to display in the chip.
iconSize
grauityIconSizeName
default:"12"
Size of the icon.
Position of the icon.Available choices: left, right
Custom text color override.
Custom background color override.
Custom border color override.
Content to display inside the chip.
Additional inline styles.
Additional CSS class name.
Variants
<Chip variant="brand">Brand</Chip>
<Chip variant="success">Success</Chip>
<Chip variant="error">Error</Chip>
<Chip variant="warning">Warning</Chip>
<Chip variant="yellow">Yellow</Chip>
<Chip variant="purple">Purple</Chip>
<Chip variant="disabled">Disabled</Chip>
Action Variants
Chips with more prominent styling for interactive elements:
<Chip variant="action-brand">Action Brand</Chip>
<Chip variant="action-success">Action Success</Chip>
<Chip variant="action-error">Action Error</Chip>
<Chip variant="action-warning">Action Warning</Chip>
<Chip size="small">Small</Chip>
<Chip size="medium">Medium</Chip>
<Chip size="large">Large</Chip>
<Chip size="extra-large">Extra Large</Chip>
With Icons
<Chip variant="brand" icon="check" iconPosition="left">
Verified
</Chip>
<Chip variant="success" icon="star" iconPosition="left">
Premium
</Chip>
<Chip variant="error" icon="exclamation-circle" iconPosition="right">
Alert
</Chip>
Rounded Chips
<Chip variant="brand" rounded={true}>
Rounded
</Chip>
<Chip variant="success" rounded={true} icon="check">
Completed
</Chip>
With Border
<Chip variant="brand" hasBorder={true}>
Bordered
</Chip>
<Chip variant="warning" hasBorder={true} rounded={true}>
Bordered & Rounded
</Chip>
Custom Colors
<Chip
textColor="#ffffff"
backgroundColor="#1976d2"
borderColor="#1565c0"
hasBorder={true}
>
Custom Colors
</Chip>
Status Indicators
<Chip variant="success" icon="check" size="small">
Active
</Chip>
<Chip variant="warning" icon="clock" size="small">
Pending
</Chip>
<Chip variant="error" icon="x" size="small">
Inactive
</Chip>
Category Tags
<Chip variant="brand" size="small" rounded={true}>
Design
</Chip>
<Chip variant="purple" size="small" rounded={true}>
Development
</Chip>
<Chip variant="yellow" size="small" rounded={true}>
Marketing
</Chip>