InlineCode

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

Gib yarn start ein um deine App zu starten.

<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‍.

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‍.

Gib yarn start ein um deine App zu starten.

Properties

Property	Type	Description
`color`	default (default) \| dark \| light \| dark-static \| light-static	The color schema of the inline code component.
`whiteSpace`	WhiteSpacedefault: undefined	The white-space property of the inline code component.

Accessibility

Property	Type	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.

Design Tokens

Größen & Stile

Token	Wert
`--inline-code--font-size`	0.875rem
`--inline-code--padding-x`	4px
`--inline-code--padding-y`	2px
`--inline-code--corner-radius`	4px

Farben

Token	Light	Dark
`--inline-code--background-color`	#DCE9F7	#5E6C7A
`--inline-code--content-color`	#1B1F24	#FFFFFF
`--inline-code--dark-background-color`	rgb(0 0 0 / 12.5%)	rgb(255 255 255 / 12.5%)
`--inline-code--dark-content-color`	rgb(0 0 0 / 100%)	rgb(255 255 255 / 100%)
`--inline-code--light-background-color`	rgb(255 255 255 / 12.5%)	rgb(0 0 0 / 12.5%)
`--inline-code--light-content-color`	rgb(255 255 255 / 100%)	rgb(0 0 0 / 100%)
`--inline-code--dark-static-background-color`	rgb(0 0 0 / 12.5%)	rgb(0 0 0 / 12.5%)
`--inline-code--dark-static-content-color`	rgb(0 0 0 / 100%)	rgb(0 0 0 / 100%)
`--inline-code--light-static-background-color`	rgb(255 255 255 / 12.5%)	rgb(255 255 255 / 12.5%)
`--inline-code--light-static-content-color`	rgb(255 255 255 / 100%)	rgb(255 255 255 / 100%)

Components

Integrations