KeyCap

A visual component for displaying keyboard keys, shortcuts, and key combinations with proper styling.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁴⁾

Properties

⁽³⁵⁾

Playground

Basic Usage

Basic keyboard key display for showing shortcuts and key combinations.

Loading demo…

import
 
{
 
Block
,
 
KeyCap
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 
align
=
"flex-start"
>
      
<Row
 
gap
=
"sm"
 
wrap
=
"wrap"
>
        
<KeyCap
>
A
</KeyCap
>
        
<KeyCap
>
Enter
</KeyCap
>
        
<KeyCap
>
Space
</KeyCap
>
        
<KeyCap
>
⌘
</KeyCap
>
        
<KeyCap
>
Ctrl
</KeyCap
>
        
<KeyCap
>
⇧
</KeyCap
>
      
</Row
>
    
</Block
>
  
)
;
}

Sizes

Different sizes for KeyCap components from extra small to extra large.

Loading demo…

import
 
{
 
Block
,
 
KeyCap
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 
align
=
"flex-start"
>
      
<Row
 
gap
=
"sm"
 
align
=
"center"
 
wrap
=
"wrap"
>
        
<KeyCap
 
size
=
"xs"
>
XS
</KeyCap
>
        
<KeyCap
 
size
=
"sm"
>
SM
</KeyCap
>
        
<KeyCap
 
size
=
"md"
>
MD
</KeyCap
>
        
<KeyCap
 
size
=
"lg"
>
LG
</KeyCap
>
        
<KeyCap
 
size
=
"xl"
>
XL
</KeyCap
>
      
</Row
>
    
</Block
>
  
)
;
}

Variants

Different visual variants for KeyCap components including default, filled, minimal, and outline styles.

Loading demo…

import
 
{
 
Block
,
 
KeyCap
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 
align
=
"flex-start"
>
      
<Row
 
gap
=
"sm"
 
wrap
=
"wrap"
>
        
<KeyCap
 
variant
=
"default"
>
Default
</KeyCap
>
        
<KeyCap
 
variant
=
"filled"
>
Filled
</KeyCap
>
        
<KeyCap
 
variant
=
"minimal"
>
Minimal
</KeyCap
>
        
<KeyCap
 
variant
=
"outline"
>
Outline
</KeyCap
>
      
</Row
>
    
</Block
>
  
)
;
}

Modifiers

KeyCap components with modifier keys for displaying keyboard shortcuts and key combinations.

Loading demo…

import
 
{
 
Block
,
 
KeyCap
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Row
 
gap
=
"xs"
 
align
=
"center"
>
        
<Text
>
Copy
</Text
>
        
<KeyCap
 
keyCode
=
"C"
 
modifiers
=
{
[
'cmd'
]
}
 
size
=
"sm"
>
⌘
</KeyCap
>
        
<Text
>+
</Text
>
        
<KeyCap
 
keyCode
=
"C"
 
modifiers
=
{
[
'cmd'
]
}
 
size
=
"sm"
>
C
</KeyCap
>
      
</Row
>
      
<Row
 
gap
=
"xs"
 
align
=
"center"
>
        
<Text
>
Save
</Text
>
        
<KeyCap
 
keyCode
=
"S"
 
modifiers
=
{
[
'cmd'
]
}
 
size
=
"sm"
>
⌘
</KeyCap
>
        
<Text
>+
</Text
>
        
<KeyCap
 
keyCode
=
"S"
 
modifiers
=
{
[
'cmd'
]
}
 
size
=
"sm"
>
S
</KeyCap
>
      
</Row
>
      
<Row
 
gap
=
"xs"
 
align
=
"center"
>
        
<Text
>
Undo
</Text
>
        
<KeyCap
 
keyCode
=
"Z"
 
modifiers
=
{
[
'cmd'
]
}
 
size
=
"sm"
>
⌘
</KeyCap
>
        
<Text
>+
</Text
>
        
<KeyCap
 
keyCode
=
"Z"
 
modifiers
=
{
[
'cmd'
]
}
 
size
=
"sm"
>
Z
</KeyCap
>
      
</Row
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/KeyCap

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap