Kbd
Kbd is a component that represents keyboard input.
Shift + Tab
<Text>
<Kbd>Shift</Kbd> + <Kbd>Tab</Kbd>
</Text>
Usage
import { Kbd } from "@yamada-ui/react"
import { Kbd } from "@/components/ui"
import { Kbd } from "@workspaces/ui"
<Kbd />
Change Variant
Shift + Tab
Shift + Tab
Shift + Tab
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>
Change Size
Shift + Tab
Shift + Tab
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>
Change Color Scheme
Shift + Tab
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>