Button

Componente de botón versátil con estilo de DaisyUI y muchas variantes.

Importar

import { Button } from 'asterui'

Ejemplos

Colores de Marca

Colores de marca primarios para acciones comunes.

</>

PrimarySecondaryAccentNeutral

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

Colores de Estado

Colores semánticos para diferentes estados y retroalimentación.

</>

InfoSuccessWarningError

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 (predeterminado), outline, dash, soft, ghost y link.

</>

SolidOutlineDashSoftGhostLink

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

Tamaños

Cinco tamaños: xs, sm, md (predeterminado), lg y xl.

</>

XSSmallMediumLargeXL

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 con fondo transparente.

</>

PrimarySecondaryAccentSuccessError

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

Borde Punteado

Botones con estilo de borde punteado.

</>

PrimarySecondaryAccent

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

Colores Suaves

Fondos de color apagados para énfasis sutil.

</>

PrimarySecondaryAccentSuccessWarning

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 activo, cargando y deshabilitado.

</>

NormalActiveLoadingDisabled

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 cuadradas y circulares para botones de icono.

</>

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

Botones extra anchos para énfasis.

</>

Wide ButtonAnother Wide

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

Botones de ancho completo.

</>

Block ButtonAnother Block

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 Carga

Spinner de carga con diferentes colores.

</>

LoadingProcessingDeleting

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

Botones de Enlace

Botones que navegan a URLs. Se renderiza como elemento anchor cuando se proporciona href.

</>

GitHubnpmInternal 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

Con Iconos

Botones con iconos usando la prop icon para espaciado automático.

</>

UploadSaveDelete

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

Iconos con Tamaño Automático

Los iconos de @aster-ui/icons coinciden automáticamente con el tamaño del botón.

</>

XSSmallMediumLargeXL

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ón de Peligro

Estilo de peligro semántico para acciones destructivas.

</>

DeleteRemove ItemCancel Account

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 Redonda

Botones en forma de píldora con extremos completamente redondeados.

</>

Get StartedLearn MoreSubscribe

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ón de Alternancia

Botones de alternancia usando la prop pressed para accesibilidad.

</>

OffToggle: Inactive

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

Sin Animación

Deshabilita el efecto de animación de clic.

</>

With AnimationNo Animation

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

Envío de Formulario

Botón con htmlType='submit' dentro del componente Form de AsterUI.

</>

Email*

 

SubmitReset

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

Manejo de Eventos

Botones con manejadores onClick y gestión de estado.

</>

Clicked 0 timesAsync Action

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

Propiedad	Descripción	Tipo	Predeterminado
type	Azúcar sintáctico para establecer variant y color juntos. Anulado por props variant & color explícitas	'primary' | 'default' | 'dashed' | 'link' | 'text'	-
color	Color del botón	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'neutral'	-
variant	Variante de estilo del botón	'solid' | 'outline' | 'dash' | 'soft' | 'ghost' | 'link' | 'text'	-
size	Tamaño del botón	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
active	Estado visual activo/presionado	boolean	false
loading	Mostrar spinner de carga y deshabilitar botón	boolean	false
shape	Forma del botón	'square' | 'circle' | 'wide' | 'block' | 'round'	-
block	Hacer el botón de ancho completo	boolean	false
ghost	Hacer el fondo transparente e invertir los colores de texto y borde	boolean	false
icon	Elemento de icono a mostrar	ReactNode	-
iconPlacement	Posición del icono	'start' | 'end'	'start'
danger	Aplica estilo de error/peligro (atajo para color=“error”)	boolean	false
pressed	Estado presionado del botón de alternancia (establece aria-pressed)	boolean	-
noAnimation	Deshabilitar animación de clic	boolean	false
disabled	Estado deshabilitado	boolean	false
aria-label	Etiqueta accesible para botones solo con icono	string	-
href	URL a la que navegar (renderiza como elemento anchor)	string	-
target	Dónde abrir la URL enlazada (cuando se establece href)	string	-
htmlType	Tipo de botón HTML (solo cuando href no está establecido)	'button' | 'submit' | 'reset'	'button'
className	Clases CSS adicionales	string	-
children	Contenido del botón	ReactNode	-
data-testid	ID de prueba para testing	string	-

Atributos de datos

El componente Button expone los siguientes atributos de datos para testing e inspección de estado:

• data-state-loading: Presente cuando el botón está en estado de carga
• data-state-disabled: Presente cuando el botón está deshabilitado
• data-state-active: Presente cuando el botón está en estado activo
• data-state-pressed: Presente cuando el botón está en estado presionado (botones de alternancia)

Accesibilidad

• Usa el elemento nativo <button> para soporte adecuado de teclado
• Se renderiza como elemento <a> cuando se proporciona href para semántica adecuada de enlace
• El estado de carga establece aria-busy="true" y deshabilita el botón
• Los botones de alternancia usan aria-pressed para soporte de lector de pantalla
• Los botones solo con icono deben usar aria-label para soporte de lector de pantalla
• El estado deshabilitado se comunica adecuadamente a tecnologías de asistencia
• Los estados de foco son visibles para navegación por teclado