Button

Formulario

Botão do sistema, com dez variantes visuais, três tamanhos e as variantes de trading long e short.

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Button } from "@trdr/ui/button"

Uso

import { Button } from "@trdr/ui/button"

export function Exemplo() {
  return <Button />
}

Variantes

Grupo	Valores	Padrão
variant	`primarysecondaryghostdestructiveinverselinklink-dangersecondary-destructlongshort`	primary
size	`defaultlgicon`	default

Props

ButtonPropsestende React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants>

Prop	Tipo	Descrição
asChild?	boolean	Renderiza o filho no lugar do <button>, herdando estilo e comportamento.
iconLeft?	React.ReactNode
iconRight?	React.ReactNode

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="button"]

53 tokens usados

bg-action-brand-disabledbg-action-destructive-activebg-action-destructive-disabledbg-action-destructive-hoverbg-action-secondary-activebg-action-secondary-disabledbg-bg-inversebg-context-trading-long-activebg-context-trading-long-defaultbg-context-trading-long-hoverbg-context-trading-short-activebg-context-trading-short-defaultbg-context-trading-short-hoverbg-context-trading-stop-defaultbg-destructivebg-primarybg-primary-activebg-primary-hoverbg-secondarybg-secondary-hoverbg-surface-primarybg-surface-secondarybg-transparentborder-bg-inverseborder-borderborder-border-disabledborder-border-strongborder-destructiveborder-primaryborder-primary-activeborder-primary-hoverborder-transparentoutline-nonering-offset-2ring-offset-backgroundring-ringtext-action-brand-activetext-action-brand-hovertext-action-destructive-activetext-action-destructive-hovertext-content-brandtext-content-disabledtext-content-errortext-content-inversetext-content-secondarytext-context-trading-long-texttext-context-trading-short-texttext-destructivetext-destructive-foregroundtext-foregroundtext-l3text-primary-foregroundtext-secondary-foreground