Pular para o conteúdo
TIS Design System

Button

Recipe React distribuída como source, com comportamento Base UI e classes/tokens públicos do Button TIS.

Design

Preview funcional

Executado pela recipe React distribuída via shadcn e baseada em Base UI.

Carregando preview funcional…

Abrir playground React · shadcn/Base UI

Estilos

Anatomia

1 2 3 4 5
1 Container — background, radius, height e min-width via Component tokens.
2 Icon (opcional) — frame/ícone 20px no sm e 24px no md/lg.
3 Label (.ds-button__label) — tipografia e cor via Component tokens.
4 Padding raiz — sm 8×8px, md 10×12px, lg 12×16px.
5 Padding do label — 4px adicionais no Label Frame para equilíbrio óptico.

Tamanhos

SizeAlturaFontePaddingTouch target
Small (--sm)32px (component.button.height.sm)component.button.label.font-size.sm8×8px (component.button.padding-y.sm × padding-x.sm)32px — meets WCAG 2.5.8 min (24px)
Medium (--md)40px (component.button.height.md)component.button.label.font-size.md10×12px (component.button.padding-y.md × padding-x.md)40px
Large (--lg)48px (component.button.height.lg)component.button.label.font-size.lg12×16px (component.button.padding-y.lg × padding-x.lg)48px — meets AAA 44px target

Estados

Estados são controlados via pseudo-classes CSS (:hover, :active, :focus-visible, [disabled]), não classes modificadoras.

EstadoCSS triggerMudança visualToken
Default—Preenchimento primáriocomponent.button.bg.brand.default
Hover:hoverPreenchimento mais escurocomponent.button.bg.brand.hover
Pressed:activePreenchimento mais escuro aindacomponent.button.bg.brand.pressed
Focus:focus-visibleRing de 2px com afastamento de 2px e cores do estado focuscomponent.button.bg.brand.focus, component.button.content.color.brand.focus, component.button.focus-ring.*
Disabled[disabled]Bg + conteúdo atenuados, sem pointer eventscomponent.button.bg.brand.disabled, component.button.content.color.brand.disabled

Com ícone

Somente ícone

Carregamento

Largura total

Mapeamento de tokens

Tokens consumidos pela variante Brand. Outras variantes seguem o mesmo padrão usando seus respectivos grupos de cor.

PropriedadeToken (Component)Variável CSS
height (sm)component.button.height.sm--ds-button-height-sm
height (md)component.button.height.md--ds-button-height-md
height (lg)component.button.height.lg--ds-button-height-lg
min-width (sm/md/lg)component.button.min-width.{sm,md,lg}--ds-button-min-width-*
padding-x (sm/md/lg)component.button.padding-x.{sm,md,lg}--ds-button-padding-x-*
padding-y (sm/md/lg)component.button.padding-y.{sm,md,lg}--ds-button-padding-y-*
gap (sm/md/lg)component.button.gap.{sm,md,lg}--ds-button-gap-*
radius / border-widthcomponent.button.radius.default, component.button.border-width.default--ds-button-radius-default, --ds-button-border-width-default
bg por estilo/estadocomponent.button.bg.{brand,toned,outline,ghost,success,danger}.*--ds-button-bg-*
border color Outlinecomponent.button.border-color.outline.*--ds-button-border-color-outline-*
text/icon colorcomponent.button.content.color.{style}.{state}--ds-button-content-color-*
label typographycomponent.button.label.{font-size,line-height,font-weight,letter-spacing}.*--ds-button-label-*
icon frame/sizecomponent.button.icon.size.{sm,md,lg}, component.button.icon.stroke-width.{sm,md,lg}--ds-button-icon-*
icon-onlycomponent.button.icon-only-{width,padding}.{sm,md,lg}--ds-button-icon-only-*
focus ringcomponent.button.focus-ring.radius.default, component.focus-ring.{width,color.default,color.success,color.error}--ds-focus-ring-* + --ds-button-focus-ring-radius-default

Variante Toned

A variante Toned usa backgrounds de overlay translúcidos (--ds-toned-background-default, --ds-toned-background-hover, --ds-toned-background-active) em vez de preenchimentos opacos. Isso difere dos padrões Subtle/Muted que usam tokens de background opacos. A abordagem translúcida permite que o button Toned se adapte naturalmente a qualquer cor de superfície abaixo dele, mantendo um tint de marca consistente.

Figma

O componente Figma expõe as propriedades abaixo no painel. Booleans de visibilidade ficam imediatamente acima do slot que controlam.

PropriedadeTipoPadrãoOpções
EstiloVariantBrandBrand, Toned, Outline, Ghost, Success, Danger
TamanhoVariantMediumSmall (32px), Medium (40px), Large (48px)
EstadoVariantDefaultDefault, Hover, Pressed, Focused, Disabled
Icon OnlyVariantfalseDefault (com label), Icon Only (quadrado)
LoadingBooleanfalsetrue, false
Show Left IconBooleanfalseAlterna a visibilidade do frame de ícone esquerdo
Left IconInstance swapPlaceholderDefine o componente de ícone esquerdo
Show Right IconBooleanfalseAlterna a visibilidade do frame de ícone direito
Right IconInstance swapPlaceholderDefine o componente de ícone direito