Button

Composant bouton polyvalent avec style DaisyUI et de nombreuses variantes.

Importation

import { Button } from 'asterui'

Exemples

Couleurs de marque

Couleurs de marque principales pour les actions courantes.

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

Couleurs d'état

Couleurs sémantiques pour différents états et retours.

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

Différentes variantes de style : solid (par défaut), outline, dash, soft, ghost et 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

Tailles

Cinq tailles : xs, sm, md (par défaut), lg et 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

Contour

Variante contour avec arrière-plan transparent.

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

Bordure pointillée

Boutons avec style de bordure pointillée.

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

Couleurs douces

Arrière-plans de couleurs atténuées pour une emphase subtile.

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

États

États actif, chargement et désactivé.

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

Formes

Formes carré et cercle pour les boutons d'icônes.

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

Large

Boutons extra larges pour l'emphase.

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

Bloc

Boutons pleine largeur.

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

États de chargement

Spinner de chargement avec différentes couleurs.

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

Boutons lien

Boutons qui naviguent vers des URLs. S'affiche comme élément ancre lorsque href est fourni.

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

Avec icônes

Boutons avec icônes utilisant la prop icon pour espacement automatique.

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

Icônes auto-dimensionnées

Les icônes de @aster-ui/icons correspondent automatiquement à la taille du bouton.

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

Bouton danger

Style sémantique de danger pour les actions destructives.

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

Forme arrondie

Boutons en forme de pilule avec extrémités entièrement arrondies.

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

Bouton bascule

Boutons bascule utilisant la prop pressed pour l'accessibilité.

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

Sans animation

Désactiver l'effet d'animation au clic.

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

Soumission de formulaire

Bouton avec htmlType='submit' à l'intérieur du composant Form 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

Gestion des événements

Boutons avec gestionnaires onClick et gestion d'état.

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`

Propriété	Description	Type	Défaut
`type`	Sucre syntaxique pour définir variant et color ensemble. Remplacé par les props variant & color explicites	`'primary' \| 'default' \| 'dashed' \| 'link' \| 'text'`	-
`color`	Couleur du bouton	`'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	-
`variant`	Variante de style du bouton	`'solid' \| 'outline' \| 'dash' \| 'soft' \| 'ghost' \| 'link' \| 'text'`	-
`size`	Taille du bouton	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`active`	État visuel actif/appuyé	`boolean`	`false`
`loading`	Afficher le spinner de chargement et désactiver le bouton	`boolean`	`false`
`shape`	Forme du bouton	`'square' \| 'circle' \| 'wide' \| 'block' \| 'round'`	-
`block`	Rendre le bouton pleine largeur	`boolean`	`false`
`ghost`	Rendre l’arrière-plan transparent et inverser le texte et les couleurs de bordure	`boolean`	`false`
`icon`	Élément icône à afficher	`ReactNode`	-
`iconPlacement`	Position de l’icône	`'start' \| 'end'`	`'start'`
`danger`	Applique le style erreur/danger (raccourci pour color=“error”)	`boolean`	`false`
`pressed`	État appuyé du bouton bascule (définit aria-pressed)	`boolean`	-
`noAnimation`	Désactiver l’animation au clic	`boolean`	`false`
`disabled`	État désactivé	`boolean`	`false`
`aria-label`	Étiquette accessible pour les boutons avec icône uniquement	`string`	-
`href`	URL vers laquelle naviguer (s’affiche comme élément ancre)	`string`	-
`target`	Où ouvrir l’URL liée (lorsque href est défini)	`string`	-
`htmlType`	Type de bouton HTML (uniquement lorsque href n’est pas défini)	`'button' \| 'submit' \| 'reset'`	`'button'`
`className`	Classes CSS supplémentaires	`string`	-
`children`	Contenu du bouton	`ReactNode`	-
`data-testid`	ID de test pour les tests	`string`	-

Attributs de données

Le composant Button expose les attributs de données suivants pour les tests et l’inspection d’état :

data-state-loading: Présent lorsque le bouton est en état de chargement
data-state-disabled: Présent lorsque le bouton est désactivé
data-state-active: Présent lorsque le bouton est en état actif
data-state-pressed: Présent lorsque le bouton est en état appuyé (boutons bascule)

Accessibilité

Utilise l’élément natif <button> pour une prise en charge appropriée du clavier
S’affiche comme élément <a> lorsque href est fourni pour une sémantique de lien appropriée
L’état de chargement définit aria-busy="true" et désactive le bouton
Les boutons bascule utilisent aria-pressed pour la prise en charge des lecteurs d’écran
Les boutons avec icône uniquement doivent utiliser aria-label pour la prise en charge des lecteurs d’écran
L’état désactivé est correctement communiqué aux technologies d’assistance
Les états de focus sont visibles pour la navigation au clavier