Stylish UI/com.segnities007.stylishui.components.atoms/StylishKbd

StylishKbd

fun StylishKbd(text: String, modifier: Modifier = Modifier, containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, contentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, textStyle: TextStyle = MaterialTheme.typography.labelMedium, shape: Shape = RoundedCornerShape(6.dp), contentPadding: PaddingValues = PaddingValues(horizontal = 6.dp, vertical = 2.dp))

A keyboard-key indicator (kbd) showing a single shortcut label, in the style of shadcn/ui and Chakra UI's Kbd component.

Renders text centered inside a keycap-like container: a filled, outlined rounded box with the label offset 1 dp downward, mimicking a physical key whose face sits slightly above its bottom edge. Use it to document keyboard shortcuts next to their actions, e.g. StylishKbd("Ctrl") + StylishKbd("K").

The component is display-only and carries no interaction semantics.

Testing

The root carries the default test tag stylish_kbd for UI tests. Callers can override it by passing their own Modifier.testTag(...) in modifier.

Parameters

text

The key label (e.g. "Ctrl", "⇧", "F2").

modifier

Modifier applied to the root Box.

containerColor

Fill color of the keycap. Defaults to MaterialTheme.colorScheme.surfaceContainerHigh.

contentColor

Color of text. Defaults to MaterialTheme.colorScheme.onSurfaceVariant.

textStyle

Typography for text. Defaults to MaterialTheme.typography.labelMedium.

shape

Corner shape of the keycap. Defaults to a 6 dp RoundedCornerShape.

contentPadding

Inner padding around text. Defaults to 6 dp horizontal, 2 dp vertical.