# Core/Pill - Usage

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `string` | Yes | `--` | The label text to display in the pill. The label should use short and clear messaging, in one or two words. Labels are required. |
| `icon` | `React.ReactNode` | No | `--` | Overrides the default icon shown based on the pill appearance and variant.<br><br><b>To use this prop you will need a design review!</b> |
| `variant` | `'bold' \| 'muted' \| 'outline'` | No | 'bold' | A variant to apply to the pill. Only applies when the appearance is not 'default'.<br><br><ul><br>  <li><br>    'bold' - Can be used for isolated pills, such as when in the header of an object details page.<br>    Use bold pills with caution, since they can easily distract from the primary content.<br>    Be cautious with multiple bold pills on a single page, and absolutely avoid multiple bold pills in close proximity.<br>  </li><br>  <li>'muted' - Used when pills are inline with other content, such as table cells.</li><br></ul><br><br>@default 'bold' |
| `appearance` | `'default' \| 'info' \| 'danger' \| 'warning' \| 'success' \| 'highlight'` | No | 'default' | The appearance of the pill, which determines its color and severity.<br><br><ul><br>  <li>'info' - Information pills communicate general information or an important property.</li><br>  <li>'danger' - Danger pills communicate problems that require action to be resolved.</li><br>  <li>'warning' - Warning pills can communicate information that is time-sensitive, or trending towards a danger state.</li><br>  <li>'success' - Success pills communicate successful states or completed actions.</li><br>  <li>'highlight' - Highlight pills bring special attention to metadata without communicating status.</li><br></ul><br><br>@default 'default' |
| `inline` | `boolean` | No | false | Whether to render the pill as an inline element. This is useful when the pill is used in a heading or other inline context.<br><br>By default, the pill will be rendered as a block element.<br><br>@default false |
| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |