Kbd
Exibe teclas e atalhos de teclado (ex.: Ctrl + K). Kbd para uma tecla, KbdGroup para um atalho com várias teclas.
Exemplos
Interaja com o componente e copie o código de cada exemplo.
Teclas e atalhos
EscCtrlK⌘⇧P
Dentro de texto
Pressione Ctrl + S para salvar o rascunho.
import { Kbd, KbdGroup } from "@t2-educacao/midas";Uso
<Kbd>Esc</Kbd>
<KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>K</Kbd>
</KbdGroup>Props
Kbd e KbdGroup aceitam as props de <kbd> e className.
Exemplos
Dentro de um botão
<Button variant="outline">
Buscar <Kbd>⌘K</Kbd>
</Button>Dentro de um tooltip
<TooltipContent>
Salvar <Kbd>Ctrl</Kbd> <Kbd>S</Kbd>
</TooltipContent>Com ícone
import { ArrowFatUp } from "@t2-educacao/midas/icons";
<Kbd><ArrowFatUp /></Kbd>Acessibilidade
- Usa o elemento semântico
<kbd>. - Para símbolos (⌘, ⇧), escreva o nome da tecla em texto próximo quando o atalho for importante.
Não faça
- Usar
Kbdpara destacar texto que não é tecla: useBadgeou texto em negrito.
InputGroup
Campo com ícones, textos ou botões dentro da mesma borda (ex.: prefixo https://, ícone de busca, botão de copiar). InputGroup, InputGroupAddon (start ou end), InputGroupInput, InputGroupTextarea, InputGroupText e InputGroupButton.
NativeSelect
O <select> nativo do navegador com o visual do Midas. Ideal para formulários simples e mobile (abre o seletor do sistema). Tamanhos default e sm.