Usage
<Check> and <Uncheck> are inline icon pairs designed for "done vs todo" lists. They render as a colored icon plus an optional inline label.
- <Check /> GitHub repo connected
- <Check /> Custom domain verified
- <Check> SSL certificate active </Check>
- <Uncheck /> Billing not configured
- <Uncheck> Team members not invited </Uncheck>GitHub repo connected
Custom domain verified
- SSL certificate active
Billing not configured
- Team members not invited
Without children
The icon stands alone — useful as a status marker in tables:
| Feature | Available |
|---------|-----------|
| Search | <Check /> |
| AI search | <Uncheck /> |
| Custom domain | <Check /> || Feature | Available |
| Search | |
| AI search | |
| Custom domain |
Color reference
| Component | Color | Token |
<Check> | green | --docs-success |
<Uncheck> | muted gray | --docs-fg-muted |
The colors come from your theme tokens, so dark/light mode and tenant overrides apply automatically.
Props
| Prop | Type | Description |
children | ReactNode | Optional inline label rendered after the icon |