MSDR Design System

Ações

Button, ButtonGroup, Toggle, Badge, Kbd e Spinner. A hierarquia entre variants é o que impede uma tela de ter três botões competindo pela mesma atenção.

Button — variants

Tamanhos

Com ícone

A posição vem de data-icon; o tamanho é do componente.

Estados

Button não tem prop de loading: o estado é composto com Spinner + disabled, o que mantém a API previsível.

ButtonGroup

Ações relacionadas em um único bloco.

Toggle e ToggleGroup

Para conjuntos de 2 a 7 opções, ToggleGroup substitui uma lista de botões com estado manual.

Badge

As variants de status (success, warning, info) são adições do MSDR — existem para que nenhuma tela precise de cor crua para indicar estado.

defaultsecondaryoutlinedestructivesuccesswarninginfo

Kbd e Spinner

Abrir busca ⌘ K

Um botão primário por área de decisão. Ações secundárias usam outline ou ghost; destructive fica reservado para o que remove ou desfaz algo — e sempre acompanhado de confirmação.