Kbd

Kbdは、キーボード入力を表すコンポーネントです。

Shift + Tab

<Text>
  <Kbd>Shift</Kbd> + <Kbd>Tab</Kbd>
</Text>

使い方

import { Kbd } from "@yamada-ui/react"

import { Kbd } from "@/components/ui"

import { Kbd } from "@workspaces/ui"

<Kbd />

バリアントを変更する

Shift + Tab

<VStack>
  <For each={["solid", "subtle", "surface", "outline"]}>
    {(variant, index) => (
      <Text key={index}>
        <Kbd variant={variant}>Shift</Kbd> + <Kbd variant={variant}>Tab</Kbd>
      </Text>
    )}
  </For>
</VStack>

サイズを変更する

Shift + Tab

<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size, index) => (
      <Text key={index}>
        <Kbd size={size}>Shift</Kbd> + <Kbd size={size}>Tab</Kbd>
      </Text>
    )}
  </For>
</VStack>

カラースキームを変更する

Shift + Tab

<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <Text key={index}>
        <Kbd colorScheme={colorScheme}>Shift</Kbd> +{" "}
        <Kbd colorScheme={colorScheme}>Tab</Kbd>
      </Text>
    )}
  </For>
</VStack>

Props

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm"` The size of the component.
`variant`	`"surface"`	`"outline" \| "solid" \| "subtle" \| "surface"` The variant of the component.

類似のコンポーネント

Textは、テキストの段落を表すコンポーネントです。デフォルトでは、p要素をレンダリングします。

Markは、特定のテキストを強調するコンポーネントです。

Headingは、セクションの見出しを表すコンポーネントです。デフォルトでは、h1要素をレンダリングします。

Highlightは、テキスト内の指定された文字列をハイライトするコンポーネントです。デフォルトでは、p要素をレンダリングします。

Emは、強調されたテキストを表すコンポーネントです。デフォルトでは、em要素をレンダリングします。

Code はコードブロックを表すコンポーネントです。デフォルトでは code 要素をレンダリングします。

Blockquote は引用を表すコンポーネントです。デフォルトでは blockquote 要素をレンダリングします。

Linkは、別のウェブページや同一ページ内の場所、または他のURLへのハイパーリンクを作成するコンポーネントです。