Separator & Kbd

Visually or semantically separates content. Used to display textual user input from keyboard.

Separator

Column({ space: 4 }) {
  Text('Radix Primitives')
  Text('An open-source UI component library.')
}
SSeparator()
Row({ space: 16 }) {
  Text('Blog')
  SSeparator({ orientation: 'vertical' })
  Text('Docs')
  SSeparator({ orientation: 'vertical' })
  Text('Source')
}.height(20)

Approximate web preview — the HarmonyOS rendering is the reference.

Label & line style

label with labelAlignment start | center | end; lineStyle solid | dashed | dotted; thickness.

SSeparator({ label: 'OR CONTINUE WITH' })
SSeparator({ label: 'Today', labelAlignment: 'start' })
SSeparator({ label: 'End of results', labelAlignment: 'end', lineStyle: 'dashed' })
SSeparator({ lineStyle: 'dashed' })
SSeparator({ lineStyle: 'dotted', thickness: 2 })

Approximate web preview — the HarmonyOS rendering is the reference.

Kbd

SKbdGroup() {
  SKbd({ icon: 'command' })
  SKbd({ text: '⇧' })
  SKbd({ text: '⌥' })
  SKbd({ text: '⌃' })
}
SKbdGroup() {
  SKbd({ text: 'Ctrl' })
  Text('+')
  SKbd({ text: 'B' })
}
SKbd({ icon: 'corner-down-left' })

Approximate web preview — the HarmonyOS rendering is the reference.

Sizes, keycap, combos

sizing sm | default | lg; variant 'outline'; SKbdGroup({ keys }).

SKbd({ text: 'Esc', sizing: 'sm' })
SKbd({ text: 'Esc' })
SKbd({ text: 'Esc', sizing: 'lg' })
SKbd({ text: 'Esc', variant: 'outline', sizing: 'lg' })
// combos from strings; cmd / enter / arrows become icons
SKbdGroup({ keys: ['Ctrl', 'Shift', 'P'], separator: '+' })
SKbdGroup({ keys: ['cmd', 'K'], variant: 'outline' })
SKbdGroup({ keys: ['G', 'H'], separator: 'then' })
SKbdGroup({ keys: ['up', 'down', 'enter'], sizing: 'sm' })

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SSeparator

shadcn-vue Separator: bg-border shrink-0, 1px tall (horizontal, full width) or 1px wide (vertical, full height of the parent — give the parent a height, like shadcn's h-5).

Variants: lineStyle solid | dashed | dotted, thickness, and a label cut into a horizontal line ("OR CONTINUE WITH"), placed by labelAlignment start | center | end.

Prop	Type	Default	Description
orientation	SeparatorOrientation SeparatorOrientation = 'horizontal' | 'vertical'	'horizontal'
decorative	boolean	true	Purely visual (hidden from accessibility). Set false when it separates meaningful groups.
length	Length	'100%'	Optional explicit length; defaults to 100% of the parent along the orientation.
lineStyle	SeparatorLineStyle SeparatorLineStyle = 'solid' | 'dashed' | 'dotted'	'solid'
thickness	number	1	Line thickness in vp.
label	ResourceStr | undefined	undefined	Text cut into a horizontal separator.
labelAlignment	SeparatorLabelAlignment SeparatorLabelAlignment = 'start' | 'center' | 'end'	'center'

SKbd

shadcn-vue Kbd: bg-muted text-muted-foreground h-5 min-w-5 rounded-sm px-1 font-sans text-xs font-medium.

Variants: sizing sm (16) | default (20) | lg (24) and variant default | outline (keycap look).

Prop	Type	Default	Description
text	ResourceStr | undefined	undefined
icon	string | undefined	undefined	lucide icon name, e.g. command, corner-down-left.
sizing	KbdSize KbdSize = 'sm' | 'default' | 'lg'	'default'
variant	KbdVariant KbdVariant = 'default' | 'outline'	'default'

Slots: children (trailing closure)

SKbdGroup

shadcn-vue KbdGroup: inline-flex items-center gap-1.

keys renders a shortcut from strings, joined by separator (none by default); well-known names (cmd / command / meta, enter / return, up / down / left / right) become icons.

Prop	Type	Default	Description
keys	string[]	[]
separator	string	''	Text between keys, e.g. '+' or 'then'.
sizing	KbdSize KbdSize = 'sm' | 'default' | 'lg'	'default'
variant	KbdVariant KbdVariant = 'default' | 'outline'	'default'

Slots: children (trailing closure)