Introduction

Un composant cliquable pour déclencher des actions et des interactions utilisateur. Comprend des variantes pour les icônes et les boutons groupés.

Utilisation

Bouton de base

import { Button } from "../components/ui";

export default function MyPage() {
  return (
    <Button variant="solid" colorPalette="blue">
      Click me
    </Button>
  );
}

État de chargement

import { Button } from "../components/ui";

export default function MyPage() {
  return (
    <Button loading loadingText="Saving...">
      Save
    </Button>
  );
}

IcôneBouton

Un bouton optimisé pour les icônes.

import { IconButton } from "../components/ui";
import { SearchIcon } from "./icons";

export default function MyPage() {
  return (
    <IconButton aria-label="Search">
      <SearchIcon />
    </IconButton>
  );
}

Bouton Fermer

Un bouton pré-stylisé pour fermer les éléments.

import { CloseButton } from "../components/ui";

export default function MyPage() {
  return <CloseButton onClick={() => console.log("closed")} interactive />;
}

Groupe de boutons

import { Button, ButtonGroup } from "../components/ui";

export default function MyPage() {
  return (
    <ButtonGroup attached>
      <Button>First</Button>
      <Button>Second</Button>
    </ButtonGroup>
  );
}

Constructeur de pages CMS

Ce composant est disponible sous forme de bloc bouton dans Page Builder (content/pages/*.json) :

{
  "type": "button",
  "text": "Click me",
  "variant": "solid",
  "colorPalette": "blue"
}

Propriétés

Bouton

| variant | `"solid" \ | "surface" \ | "subtle" \ | "outline" \ | "plain"` | The visual style of the button. |

| size | `"2xs" \ | "xs" \ | "sm" \ | "md" \ | "lg" \ | "xl" \ | "2xl"` | The size of the button. |

| loading | boolean | Si « vrai », le bouton affichera une flèche de chargement. | | loadingText | string | Le texte à afficher lors du chargement. |

| type | `"button" \ | "soumettre" \ | "reset"` | The HTML button type. |

| colorPalette | string | Le thème de couleur du bouton. | | interactive | boolean | S'il faut activer l'hydratation côté client. |

Groupe de boutons