Code - Docs - Artefact

Code

Typography

Rein darstellend

Einführung

Ein eingebettetes <code>-Element für kurze Code-Schnipsel oder monospace-Text innerhalb einer Textzeile.

Verwendung

npm installconst x = 5;GET /api/users

import { Code } from "../components/ui";

export default function MyPage() {
  return (
    <p>
      Run <Code>npm install</Code> to install dependencies.
    </p>
  );
}

Eigenschaften

Eigenschaft	Typ	Beschreibung
`children`	`Child`	Der Code-Inhalt.
`variant`	`"solid" \| "surface" \| "subtle" \| "outline" \| "plain"`	Visueller Stil. Standard `"subtle"`.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	Schrift- und Polsterungsgröße. Standard `"md"`.
`colorPalette`	`"blue" \| "green" \| "red" \| "purple" \| "orange" \| "cyan" \| "yellow" \| "pink" \| "teal" \| "indigo" \| "gray" \| "success" \| "error" \| "warning"`	Das Farbschema.
`class`	`string`	Benutzerdefinierte CSS-Klassen.

Barrierefreiheit

Code rendert ein natives <code>-Element, sodass Bildschirmleser es als Code-Inhalt ankündigen, ohne dass zusätzliche ARIA-Verdrahtung nötig ist. Für mehrzeilige Code-Blöcke umschließen Sie es selbst mit einem <pre> — Code gestaltet nur den eingebetteten Fall.