Code

Represents keyboard input or a hotkey.

import { Component } from '@angular/core';
import { RdxCodeComponent } from '@radix-ng/components/code';
import { RdxThemeDirective } from '@radix-ng/components/theme';

@Component({
    selector: 'kbd-demo',
    standalone: true,
    imports: [RdxThemeDirective, RdxCodeComponent],
    template: `
        <div rdxTheme>
            <rdx-code>console.log()</rdx-code>
        </div>
    `
})
export class CodeComponent {}

API Reference

Prop	Type	Default
`color`	`RadixColor`	-
`size`	`ResponsiveSize`	-
`variant`	`"solid" \| "soft" \| "outline" \| "ghost" \| "surface"`	`'soft'`
`weight`	`"light" \| "regular" \| "medium" \| "bold"`	-
`class`	-	-
`class`	-	-

Examples

Sizes

Use the size prop to control text size. This prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease.

import { Component } from '@angular/core';
import { RdxCodeComponent } from '@radix-ng/components/code';
import { RdxThemeDirective } from '@radix-ng/components/theme';

@Component({
    selector: 'kbd-sizes-demo',
    standalone: true,
    imports: [RdxThemeDirective, RdxCodeComponent],
    template: `
        <div class="rt-Flex rt-r-fd-column rt-r-ai-start rt-r-gap-2">
            <rdx-code size="1">console.log()</rdx-code>
            <rdx-code size="2">console.log()</rdx-code>
            <rdx-code size="3">console.log()</rdx-code>
            <rdx-code size="4">console.log()</rdx-code>
            <rdx-code size="5">console.log()</rdx-code>
            <rdx-code size="6">console.log()</rdx-code>
            <rdx-code size="7">console.log()</rdx-code>
            <rdx-code size="8">console.log()</rdx-code>
        </div>
    `
})
export class CodeSizeComponent {}

Variants

Use the variant prop to control the visual style.

import { Component } from '@angular/core';
import { RdxCodeComponent } from '@radix-ng/components/code';
import { RdxThemeDirective } from '@radix-ng/components/theme';

@Component({
    selector: 'kbd-variants-demo',
    standalone: true,
    imports: [RdxThemeDirective, RdxCodeComponent],
    template: `
        <div class="rt-Flex rt-r-fd-column rt-r-ai-start rt-r-gap-2">
            <rdx-code variant="solid">console.log()</rdx-code>
            <rdx-code variant="soft">console.log()</rdx-code>
            <rdx-code variant="outline">console.log()</rdx-code>
            <rdx-code variant="ghost">console.log()</rdx-code>
        </div>
    `
})
export class CodeVariantsComponent {}