Button

Exibe um botão ou um componente com aparência de botão.

Exemplos

Regular

Emphasis

Error

Warning

Success

Outlined

Gradient

Medbrain

Tamanhos

Com ícone

Com badge

Com alerta

Carregando

Largura total

Desabilitado

API

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
variant	"regular" | "regular-soft" | "regular-basic" | "emphasis" | "emphasis-soft" | "emphasis-basic" | "error" | "error-soft" | "error-basic" | "warning" | "warning-soft" | "warning-basic" | "success" | "success-soft" | "success-basic" | "outlined" | "gradient" | "medbrain"	"regular", "regular-soft", "regular-basic", "emphasis", "emphasis-soft", "emphasis-basic", "error", "error-soft", "error-basic", "warning", "warning-soft", "warning-basic", "success", "success-soft", "success-basic", "outlined", "gradient", "medbrain"	"regular"	Define o estilo visual do botão.
size	"sm" | "md" | "lg" | "xl"	"sm", "md", "lg", "xl"	"md"	Define o tamanho do botão.
asChild	boolean	true, false	false	Troca o elemento renderizado por padrão pelo que for passado como filho, mesclando props e comportamento.
full	boolean	true, false	false	Faz o botão ocupar toda a largura disponível (w-full no botão e na div que o envolve). Não vale para botão só com ícone, que mantém o tamanho quadrado.
containerClassName	string	-	-	Classe da div que envolve o botão e o badge.
iconLeft	React.ReactNode	-	-	Ícone exibido à esquerda do conteúdo do botão. Não é renderizado quando alert está definido nem durante o loading. Botões só com ícone devem receber um aria-label.
iconRight	React.ReactNode	-	-	Ícone exibido à direita do conteúdo do botão. Não é renderizado durante o loading.
badge	number | string	-	-	Mostra um badge com o valor informado no canto superior direito do botão. Fica oculto quando o valor é 0, "0" ou string vazia. O badge tem role="status" e o nome acessível "1 notificação" quando o valor é 1 e no formato "valor + notificações" nos demais casos, por exemplo "3 notificações".
loading	boolean	true, false	false	Mostra um indicador de carregamento no lugar do conteúdo (que fica invisível para manter a largura) e desabilita o botão. Durante o carregamento, o botão continua desabilitado mesmo que você passe disabled={false}.
type	"button" | "submit" | "reset"	"button", "submit", "reset"	"button"	Tipo nativo do botão. O padrão é "button" para nunca enviar um formulário por acidente; passe type="submit" explicitamente dentro de formulários. Não é aplicado quando asChild é usado.
alert	string (cor)	-	-	Mostra um círculo de alerta animado, com a cor CSS informada (de preferência um token do DS, como var(--color-feedback-error-stroke)), à esquerda do conteúdo do botão, no lugar do iconLeft.
disabled	boolean	true, false	false	Desabilita o botão (herdado de button).
...props	Todas as props nativas de button	-	-	Permite passar qualquer outra propriedade padrão do elemento button.