RhombusKit

Code Block

A read-only code viewer that shows a snippet verbatim with a language label and a copy-to-clipboard button. It is the one core component that wraps no Material primitive of its own, yet its toolbar, label, and surface all draw from the token contract — toggle the theme above to see it track.

Example

typescript
import { RhombusButtonComponent } from '@rhombuskit/core';

@Component({
  selector: 'app-demo',
  imports: [RhombusButtonComponent],
  template: '<rhombus-button variant="primary">Save</rhombus-button>',
})
export class DemoComponent {}

When to use

  • Use it to display code for reading and copying — docs, usage examples, command snippets. It is not an editor; pass the source in via [code].
  • When you want consistent, token-themed code surfaces across light and dark, with a built-in copy affordance and graceful fallback when syntax highlighting isn't available.

When not to use

  • For editable code or user input, this is read-only — use a Textarea instead.
  • For a single short value the user should copy (a token, an ID), an Input or a Chip is lighter than a full code surface.
  • For prose, tips, or warnings rather than code, use an Alert or a Card.

Related components

  • Textarea — multiline editable text input.
  • Input — single-line values and short snippets.
  • Theming — the token contract this block tracks.

Was this page helpful?