# Core/Ribbon - Usage

A ribbon component used to highlight new features that exist in a 'preview' state. Ribbons communicate that users may encounter errors when using these features.

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `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. |
| `children` | `string` | Yes | `--` | The label text to display. |
| `color` | `(typeof ribbonColors)[number]` | No | 'teal' | The color of the ribbon. One of the predefined colors (teal, green, purple).<br>For custom colors, use FORCE__className with CSS that sets --_ribbon-background-color.<br>@default 'teal' |
| `leadingIcon` | `SvgIcon` | No | `--` | Icon to display before the ribbon text. |
| `position` | `(typeof ribbonPositions)[number]` | No | 'right' | The position of the ribbon tail (left or right).<br>@default 'right' |
| `trailingIcon` | `SvgIcon` | No | `--` | Icon to display after the ribbon text. |