Content & statusBrick 0.1.2

Code

Code renders short inline technical text with native `code` semantics and finished Brick recipes.

Live example

Built from the published package

Interactive

Use aria-label to give an icon action its accessible name.

Choose with confidence

Know when Code is the right part

Use it when

Use Code inside prose for identifiers, attributes, commands, filenames, and other short technical literals.

Choose another path when

Do not use it for multi-line source, scrolling, language metadata, copy controls, keyboard input (kbd), output (samp), or variables (var). Use Code Block for structured source.

Installation and imports

tsx

import { Code } from "@flowstack-ui/brick/code";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/code.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Code is also available from @flowstack-ui/brick.

Quick start

tsx

<Text as="p">Use <Code>aria-label</Code> for the accessible name.</Text>

Visual recipes and states

subtle adds a quiet surface and border; plain changes no surrounding paint. neutral uses technical-text colors while inherit follows its parent. inherit size preserves prose rhythm; sm and md are explicit. Code has no interactive, disabled, loading, validation, or selected state.

Examples

Plain inherited code

tsx

<Code variant="plain" tone="inherit">data-state</Code>

Explicit compact code

tsx

<Code size="sm">npm run check</Code>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Prop	Values	Default
`variant`	`subtle`, `plain`	`subtle`
`tone`	`neutral`, `inherit`	`neutral`
`size`	`inherit`, `sm`, `md`	`inherit`
`slot`	`string`	`code`

Public exports are Code, CodeProps, CodeVariant, CodeTone, and CodeSize.

Shared responsibility

Accessibility

Native code semantics identify a computer-code fragment. Keep the literal inside meaningful surrounding content. Do not add a role or tab stop. Forced colors preserves system text and border colors.

Responsive behavior

Code follows surrounding inline flow, wrapping, direction, and typography. It adds no breakpoint, width, overflow, or viewport behavior.

Stable visual contract

Styling and tokens

Customization

tsx

<Code style={{ "--brick-code-background": "lavender" }}>npm test</Code>

Prefer the recipe props first. Use public variables for a deliberate local theme and a class for a reusable consumer recipe.

Tokens and CSS hooks

Use .brick-code, data-slot, data-variant, data-tone, and data-size. Public variables are --brick-code-foreground, --brick-code-background, --brick-code-border-color, --brick-code-border-width, --brick-code-radius, --brick-code-padding-block, --brick-code-padding-inline, --brick-code-font-family, --brick-code-font-size, --brick-code-font-weight, --brick-code-line-height, and --brick-code-letter-spacing.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground