var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var k=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),y=(o,e)=>{for(var t in e)a(o,t,{get:e[t],enumerable:!0})},s=(o,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of p(e))!f.call(o,r)&&r!==t&&a(o,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return o};var w=(o,e,t)=>(t=o!=null?m(g(o)):{},s(e||!o||!o.__esModule?a(t,"default",{value:o,enumerable:!0}):t,o)),x=o=>s(a({},"__esModule",{value:!0}),o);var d=k((N,c)=>{c.exports=_jsx_runtime});var j={};y(j,{default:()=>h,frontmatter:()=>C});var n=w(d()),C={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={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...o.components},{ComponentLinks:t}=e;return t||b("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,{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,{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,{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,{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 h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(l,{...o})}):l(o)}function b(o,e){throw new Error("Expected "+(e?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(j);})(); ;return Component;

Command

Props