Primitiveaction

Button

Stable

O primitive canônico de ação. A intenção semântica vive em `variant` e a densidade em `size`; tratamentos decorativos pertencem a recipes construídas sobre ele.

Instalação

npx up-web-ds add button

Preview

Basic

Variants

Sizes

States

All states

Basic

Variants

Sizes

States

As Link

Link com aparência de botãoOutline

Usage

@/components/ui/button
import { Button } from '@/components/ui/button'
Button
<Button>Continuar</Button>

Props

Props de Button
PropTypeDefaultDescription
size"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null'default'
variant"link" | "destructive" | "primary" | "outline" | "secondary" | "ghost" | null'primary'
classNamestring | ((state: ButtonState) => string | undefined)sem valor padrãoCSS class applied to the element, or a function that returns a class based on the component's state.
focusableWhenDisabledbooleanfalseWhether the button should be focusable when disabled.
nativeButtonbooleantrueWhether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>sem valor padrãoAllows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
styleReact.CSSProperties | ((state: ButtonState) => React.CSSProperties | undefined)sem valor padrãoStyle applied to the element, or a function that returns a style object based on the component's state.

Estende ButtonPrimitive.Props & VariantProps<typeof buttonVariants>. Aceita também os atributos padrão de um elemento React (285 não listados).

Metadata

Notas de acessibilidade

Semântica de button do Base UI; o anel de foco vem do token --ring da Foundation, e as transições usam a escala de motion, então reduced-motion as colapsa.

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
action
Status
Stable

Origem e distribuição

Fonte
Internal (up-web-studio)
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
@base-ui/react, class-variance-authority
Ícones
Nenhum
Construído sobre
Nenhum
Usado por
Alert DialogAttachmentButton GroupComboboxDialogDialog StackInput GroupMini CalendarQuestionnaireRoadmap CalendarSheetShimmer ButtonSidebarStatus ButtonToggle