Button

Componente de botão versátil com estilo DaisyUI e muitas variantes.

Importação

import { Button } from 'asterui'

Exemplos

Cores de Marca

Cores de marca primárias para ações comuns.

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary">Primary</Button>
        <Button color="secondary">Secondary</Button>
        <Button color="accent">Accent</Button>
        <Button color="neutral">Neutral</Button>
      </Space>
    )
}

export default App

Cores de Estado

Cores semânticas para diferentes estados e feedback.

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="info">Info</Button>
        <Button color="success">Success</Button>
        <Button color="warning">Warning</Button>
        <Button color="error">Error</Button>
      </Space>
    )
}

export default App

Variantes

Diferentes variantes de estilo: solid (padrão), outline, dash, soft, ghost e link.

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary">Solid</Button>
        <Button color="primary" variant="outline">Outline</Button>
        <Button color="primary" variant="dash">Dash</Button>
        <Button color="primary" variant="soft">Soft</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="link">Link</Button>
      </Space>
    )
}

export default App

Tamanhos

Cinco tamanhos: xs, sm, md (padrão), lg e xl.

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm" align="center">
        <Button size="xs">XS</Button>
        <Button size="sm">Small</Button>
        <Button size="md">Medium</Button>
        <Button size="lg">Large</Button>
        <Button size="xl">XL</Button>
      </Space>
    )
}

export default App

Outline

Variante outline com fundo transparente.

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" variant="outline">Primary</Button>
        <Button color="secondary" variant="outline">Secondary</Button>
        <Button color="accent" variant="outline">Accent</Button>
        <Button color="success" variant="outline">Success</Button>
        <Button color="error" variant="outline">Error</Button>
      </Space>
    )
}

export default App

Borda Tracejada

Botões com estilo de borda tracejada.

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" variant="dash">Primary</Button>
        <Button color="secondary" variant="dash">Secondary</Button>
        <Button color="accent" variant="dash">Accent</Button>
      </Space>
    )
}

export default App

Cores Suaves

Fundos de cores suaves para ênfase sutil.

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" variant="soft">Primary</Button>
        <Button color="secondary" variant="soft">Secondary</Button>
        <Button color="accent" variant="soft">Accent</Button>
        <Button color="success" variant="soft">Success</Button>
        <Button color="warning" variant="soft">Warning</Button>
      </Space>
    )
}

export default App

Estados

Estados ativo, carregando e desabilitado.

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary">Normal</Button>
        <Button color="primary" active>Active</Button>
        <Button color="primary" loading>Loading</Button>
        <Button color="primary" disabled>Disabled</Button>
      </Space>
    )
}

export default App

Formas

Formas quadradas e circulares para botões de ícone.

import { Button, Space } from 'asterui'
import { XMarkIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm" align="center">
        <Button color="primary" shape="square">
          <XMarkIcon />
        </Button>
        <Button color="primary" shape="circle">
          <XMarkIcon />
        </Button>
      </Space>
    )
}

export default App

Wide

Botões extra largos para ênfase.

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Button color="primary" shape="wide">Wide Button</Button>
        <Button color="secondary" shape="wide">Another Wide</Button>
      </Space>
    )
}

export default App

Block

Botões de largura total.

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" className="w-full">
        <Button color="primary" shape="block">Block Button</Button>
        <Button color="secondary" shape="block">Another Block</Button>
      </Space>
    )
}

export default App

Estados de Carregamento

Spinner de carregamento com cores diferentes.

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" loading>Loading</Button>
        <Button color="success" loading>Processing</Button>
        <Button color="error" loading>Deleting</Button>
      </Space>
    )
}

export default App

Botões de Link

Botões que navegam para URLs. Renderiza como elemento âncora quando href é fornecido.

GitHub npm Internal Link

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" href="https://github.com" target="_blank">GitHub</Button>
        <Button variant="ghost" href="https://npmjs.com" target="_blank">npm</Button>
        <Button href="/components" variant="link">Internal Link</Button>
      </Space>
    )
}

export default App

Com Ícones

Botões com ícones usando a prop icon para espaçamento automático.

import { Button, Space } from 'asterui'
import { ArrowUpTrayIcon, CheckIcon, TrashIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" icon={<ArrowUpTrayIcon />}>
          Upload
        </Button>
        <Button color="success" icon={<CheckIcon />}>
          Save
        </Button>
        <Button color="error" icon={<TrashIcon />} iconPosition="end">
          Delete
        </Button>
      </Space>
    )
}

export default App

Ícones Auto-dimensionados

Ícones de @aster-ui/icons correspondem automaticamente ao tamanho do botão.

import { Button, Space } from 'asterui'
import { ArrowUpTrayIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm" align="center">
        <Button size="xs" color="primary" icon={<ArrowUpTrayIcon />}>XS</Button>
        <Button size="sm" color="primary" icon={<ArrowUpTrayIcon />}>Small</Button>
        <Button size="md" color="primary" icon={<ArrowUpTrayIcon />}>Medium</Button>
        <Button size="lg" color="primary" icon={<ArrowUpTrayIcon />}>Large</Button>
        <Button size="xl" color="primary" icon={<ArrowUpTrayIcon />}>XL</Button>
      </Space>
    )
}

export default App

Botão de Perigo

Estilo semântico de perigo para ações destrutivas.

import { Button, Space } from 'asterui'
import { TrashIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button danger>Delete</Button>
        <Button danger icon={<TrashIcon />}>
          Remove Item
        </Button>
        <Button danger variant="outline">Cancel Account</Button>
      </Space>
    )
}

export default App

Forma Round

Botões em forma de pílula com extremidades totalmente arredondadas.

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" shape="round">Get Started</Button>
        <Button color="secondary" shape="round">Learn More</Button>
        <Button color="accent" shape="round">Subscribe</Button>
      </Space>
    )
}

export default App

Botão Toggle

Botões de alternância usando a prop pressed para acessibilidade.

import { Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [pressed, setPressed] = useState(false)
  
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button
          color="primary"
          pressed={pressed}
          active={pressed}
          onClick={() => setPressed(!pressed)}
        >
          {pressed ? 'On' : 'Off'}
        </Button>
        <Button
          color="secondary"
          variant="outline"
          pressed={pressed}
          active={pressed}
          onClick={() => setPressed(!pressed)}
        >
          Toggle: {pressed ? 'Active' : 'Inactive'}
        </Button>
      </Space>
    )
}

export default App

Sem Animação

Desabilitar o efeito de animação de clique.

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary">With Animation</Button>
        <Button color="primary" noAnimation>No Animation</Button>
      </Space>
    )
}

export default App

Envio de Formulário

Botão com htmlType='submit' dentro do componente Form do AsterUI.

import { Button, Space, Input, Form, notification } from 'asterui'

function App() {
  const handleFinish = (values: { email: string }) => {
    notification.success({ message: 'Submitted!', description: `Email: ${values.email}` })
  }
  
  return (
      <Form onFinish={handleFinish}>
        <Form.Item name="email" label="Email" required>
          <Input type="email" placeholder="you@example.com" />
        </Form.Item>
        <Form.Item>
          <Space direction="horizontal" size="sm">
            <Button color="primary" htmlType="submit">Submit</Button>
            <Button htmlType="reset">Reset</Button>
          </Space>
        </Form.Item>
      </Form>
    )
}

export default App

Manipulação de Eventos

Botões com handlers onClick e gerenciamento de estado.

import { Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  const [loading, setLoading] = useState(false)
  
  const handleAsync = async () => {
    setLoading(true)
    await new Promise(resolve => setTimeout(resolve, 2000))
    setLoading(false)
  }
  
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" onClick={() => setCount(c => c + 1)}>
          Clicked {count} times
        </Button>
        <Button color="secondary" onClick={handleAsync} loading={loading}>
          {loading ? 'Processing...' : 'Async Action'}
        </Button>
      </Space>
    )
}

export default App

API

`Button`

Propriedade	Descrição	Tipo	Padrão
`type`	Açúcar sintático para definir variant e color juntos. Substituído por props variant & color explícitas	`'primary' \| 'default' \| 'dashed' \| 'link' \| 'text'`	-
`color`	Cor do botão	`'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	-
`variant`	Variante de estilo do botão	`'solid' \| 'outline' \| 'dash' \| 'soft' \| 'ghost' \| 'link' \| 'text'`	-
`size`	Tamanho do botão	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`active`	Estado visual ativo/pressionado	`boolean`	`false`
`loading`	Mostrar spinner de carregamento e desabilitar botão	`boolean`	`false`
`shape`	Forma do botão	`'square' \| 'circle' \| 'wide' \| 'block' \| 'round'`	-
`block`	Tornar o botão de largura total	`boolean`	`false`
`ghost`	Tornar o fundo transparente e inverter as cores de texto e borda	`boolean`	`false`
`icon`	Elemento de ícone para exibir	`ReactNode`	-
`iconPlacement`	Posição do ícone	`'start' \| 'end'`	`'start'`
`danger`	Aplica estilo de erro/perigo (atalho para color=“error”)	`boolean`	`false`
`pressed`	Estado pressionado do botão de alternância (define aria-pressed)	`boolean`	-
`noAnimation`	Desabilitar animação de clique	`boolean`	`false`
`disabled`	Estado desabilitado	`boolean`	`false`
`aria-label`	Rótulo acessível para botões somente com ícone	`string`	-
`href`	URL para navegar (renderiza como elemento âncora)	`string`	-
`target`	Onde abrir a URL vinculada (quando href está definido)	`string`	-
`htmlType`	Tipo de botão HTML (somente quando href não está definido)	`'button' \| 'submit' \| 'reset'`	`'button'`
`className`	Classes CSS adicionais	`string`	-
`children`	Conteúdo do botão	`ReactNode`	-
`data-testid`	ID de teste para testes	`string`	-

Atributos de dados

O componente Button expõe os seguintes atributos de dados para testes e inspeção de estado:

data-state-loading: Presente quando o botão está em estado de carregamento
data-state-disabled: Presente quando o botão está desabilitado
data-state-active: Presente quando o botão está em estado ativo
data-state-pressed: Presente quando o botão está em estado pressionado (botões de alternância)

Acessibilidade

Usa elemento <button> nativo para suporte adequado de teclado
Renderiza como elemento <a> quando href é fornecido para semântica adequada de link
Estado de carregamento define aria-busy="true" e desabilita o botão
Botões de alternância usam aria-pressed para suporte de leitor de tela
Botões somente com ícone devem usar aria-label para suporte de leitor de tela
Estado desabilitado é comunicado adequadamente para tecnologias assistivas
Estados de foco são visíveis para navegação por teclado