# InlineCode

InlineCode hebt Code-Beispiele innerhalb eines Fließtextes hervor.

```tsx
import {
  InlineCode,
  Text,
} from "@mittwald/flow-react-components";

<Text>
  Gib <InlineCode>yarn start</InlineCode> ein um deine App
  zu starten.
</Text>
```

---

# Best Practices

- Setze InlineCode sparsam ein. Zu viele InlineCodes machen einen Text
  unleserlich.
- Nutze InlineCode nur für kurze Beispiele. Für längere Code-Beispiele eignet
  sich der [CodeBlock](https://flow.mittwald.de/04-components/content/code-block).

---

# Color

Zusätzlich zur Standard-Color kann InlineCode in **Light** und **Dark**
dargestellt werden, wenn die Standard-Color auf farbigen oder dekorativen
Hintergründen keinen ausreichenden Kontrast (mind. 4,5:1) bietet. Wann welche
Color passt, beschreibt
[Color](https://flow.mittwald.de/02-foundations/01-design/02-colors#light-und-dark-color).

```tsx
import {
  InlineCode,
  Text,
} from "@mittwald/flow-react-components";

<Text color="light">
  Gib <InlineCode color="light">yarn start</InlineCode> ein
  um deine App zu starten.
</Text>
```

```tsx
import {
  InlineCode,
  Text,
} from "@mittwald/flow-react-components";

<Text>
  Gib <InlineCode color="dark">yarn start</InlineCode> ein
  um deine App zu starten.
</Text>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `"default" \| "dark" \| "light" \| "dark-static" \| "light-static"` | `"default"` | The color schema of the inline code component. |
| `whiteSpace` | `WhiteSpace` | `undefined` | The white-space property of the inline code component. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. @see aria-labelledby. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |