var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),k=(o,e)=>{for(var t in e)i(o,t,{get:e[t],enumerable:!0})},a=(o,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of u(e))!g.call(o,r)&&r!==t&&i(o,r,{get:()=>e[r],enumerable:!(s=m(e,r))||s.enumerable});return o};var y=(o,e,t)=>(t=o!=null?h(p(o)):{},a(e||!o||!o.__esModule?i(t,"default",{value:o,enumerable:!0}):t,o)),w=o=>a(i({},"__esModule",{value:!0}),o);var d=f((v,c)=>{c.exports=_jsx_runtime});var _={};k(_,{default:()=>C,frontmatter:()=>x});var n=y(d()),x={id:"command",title:"Command",description:"A command is used to show which key or combination of keys performs a given action."};function l(o){let e=Object.assign({p:"p",code:"code",h2:"h2",pre:"pre",a:"a",ul:"ul",li:"li",strong:"strong"},o.components),{ComponentLinks:t}=e;return t||j("ComponentLinks",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"Command"})," component wraps individual keys in a ",(0,n.jsx)(e.code,{children:""})," component."]}),` `,(0,n.jsx)(t,{github:{package:"saas-ui-core/src/command"},npm:{package:"@saas-ui/core"},theme:{componentName:"command"}}),` `,(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 { Command } from '@saas-ui/react' `})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",center:"true",children:`shift H `})}),` `,(0,n.jsx)(e.h2,{id:"guideline",children:"Guideline"}),` `,(0,n.jsxs)(e.p,{children:[`All shortcuts should do their best to match what appears on the user\u2019s keyboard. Use `,(0,n.jsx)(e.a,{href:"/navigation/hotkeys",children:"useHotkeys"})," to manage and register your hotkey actions."]}),` `,(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 symbols (\u2325 \u21E7 \u2303 \u2318) 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, used on Windows and Unix machines.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",center:"true",children:`shift+X `})}),` `,(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",center:"true",children:`G then D `})}),` `,(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",center:"true",children:`alt or option `})}),` `,(0,n.jsx)(e.h2,{id:"use-in-tooltips",children:"Use in tooltips"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",center:"true",children:` Go to dashboard G then D } > `})})]})}function b(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(l,o)})):l(o)}var C=b;function j(o,e){throw new Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(_);})(); ;return Component;

Command

Props