var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of u(e))!m.call(t,r)&&r!==o&&s(t,r,{get:()=>e[r],enumerable:!(i=p(e,r))||i.enumerable});return t};var y=(t,e,o)=>(o=t!=null?h(b(t)):{},a(e||!t||!t.__esModule?s(o,"default",{value:t,enumerable:!0}):o,t)),K=t=>a(s({},"__esModule",{value:!0}),t);var d=g((N,c)=>{c.exports=_jsx_runtime});var j={};f(j,{default:()=>x,frontmatter:()=>k});var n=y(d()),k={id:"kbd",title:"Keyboard Key",category:"data-display",package:"@chakra-ui/layout",description:"The keyboard key component exists to show which key or combination of keys performs a given action."};function l(t){let e=Object.assign({h2:"h2",pre:"pre",code:"code",p:"p",ul:"ul",li:"li",strong:"strong"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Kbd } from '@chakra-ui/react' `})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` shift + H `})}),` `,(0,n.jsx)(e.h2,{id:"guideline",children:"Guideline"}),` `,(0,n.jsx)(e.p,{children:"All shortcuts should do their best to match what appears on the user\u2019s keyboard."}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"All single letters A-Z are uppercase."}),` `,(0,n.jsx)(e.li,{children:"For non-letter keys such as enter, esc and shift, stick to lowercase."}),` `,(0,n.jsx)(e.li,{children:"Use the arrow symbol as opposed to spelling things out."}),` `]}),` `,(0,n.jsx)(e.h2,{id:"modifier",children:"Modifier"}),` `,(0,n.jsxs)(e.p,{children:["The only punctuation you should need is the ",(0,n.jsx)(e.strong,{children:"+"}),` to indicate that a combination of keys will activate the shortcut.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` shift + H `})}),` `,(0,n.jsx)(e.p,{children:`For a sequence of keys where one must follow the other, write "then" in between. Stick to lowercase to match the non-letter keys.`}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` shift then H `})}),` `,(0,n.jsx)(e.p,{children:`If two different keys can execute the same action or the shortcut itself may look different on the user\u2019s keyboard, write "or" in between.`}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` alt or option `})})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(l,t)})):l(t)}var x=w;return K(j);})(); ;return Component;