Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Typography

/

Kbd

Represents keyboard input or a hotkey.

Shift + Tab
rx.text.kbd("Shift + Tab")

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.

Shift + TabShift + TabShift + TabShift + TabShift + TabShift + TabShift + TabShift + TabShift + Tab
rx.flex(
    rx.text.kbd("Shift + Tab", size="1"),
    rx.text.kbd("Shift + Tab", size="2"),
    rx.text.kbd("Shift + Tab", size="3"),
    rx.text.kbd("Shift + Tab", size="4"),
    rx.text.kbd("Shift + Tab", size="5"),
    rx.text.kbd("Shift + Tab", size="6"),
    rx.text.kbd("Shift + Tab", size="7"),
    rx.text.kbd("Shift + Tab", size="8"),
    rx.text.kbd("Shift + Tab", size="9"),
    direction="column",
    spacing="3",
)

Represents keyboard input or a hotkey.

Test
PropTypeDescriptionValues
sizeLiteral

Text size: "1" - "9"

Event Triggers

No component specific event triggers

← HeadingLink →

Did you find this useful?