All components (204)

Inline code

Typography · Code

What it is and when to use it

A piece of code INSIDE a sentence: a variable name, a path, a value, a command.

The other pieces that go inside a text have their own card: Kbd (Key), Mark (Highlight), Highlight (Highlight matches) and Blockquote (Quote).

When to use it

A variable name, a path or a value inside a text: "Run npm run verify before pushing".
Its size is relative (0.9em) and not a step of the scale, so it follows the surrounding text instead of imposing its own. A long value wraps where needed instead of overflowing the box.

When not to

A multi-line code block with numbering and copying: CodeBlock.
A key or a shortcut: Kbd.
A standalone status label: Tag; a counter above an icon: Badge.

Keyboard: it does not take part. It is not interactive.

Accessibility: it is a real <code>, with the theme's monospaced font. It keeps the spaces of the text (white-space: break-spaces), so what is read is exactly what has to be typed.

Fine-tuning: --amset-code-inline-background, --amset-code-inline-color and --amset-code-inline-border.

What it looks like

To check everything, run npm run verificar before pushing the branch.

The brand color comes from --amset-accent, and the theme, from the attribute data-theme.

<Text>
  Para comprobarlo todo se lanza <Code>npm run verificar</Code> before pushing the branch.
</Text>

Props

Import it with import { Code } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`className`	`string`	Merged with the library classes; it does not replace them.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech:

Interactivo