> Button

Button

Boutons de type Pressable (React Native) avec différentes tailles et variants.

TagsuiInformationsFigmaExemples11StylesDisponibles

Sizes

export const Sizes = () => (
  <Box display="flex" flexDirection="row" style={{ alignItems: 'flex-start' }} gap={4}>
    <Button variant="secondary" size="sm" title="Bouton sm" />
    <Button variant="secondary" size="md" title="Bouton md" />
    <Button variant="secondary" size="lg" title="Bouton lg" />
  </Box>
);

Primary

export const Primary = () => (
  <Box display="flex" flexDirection="row" gap={4}>
    <Button variant="primary" title="Bouton primary" />
    <Button variant="primary" title="Disabled" disabled />
  </Box>
);

Secondary

export const Secondary = () => (
  <Box display="flex" flexDirection="row" gap={4}>
    <Button variant="secondary" title="Bouton secondary" />
    <Button variant="secondary" title="Disabled" disabled />
  </Box>
);

Tertiary

export const Tertiary = () => (
  <Box display="flex" flexDirection="row" gap={4}>
    <Button variant="tertiary" title="Bouton tertiary" />
    <Button variant="tertiary" title="Disabled" disabled />
  </Box>
);

Danger

export const Danger = () => (
  <Box display="flex" flexDirection="row" gap={4}>
    <Button variant="danger" title="Bouton danger" />
    <Button variant="danger" title="Disabled" disabled />
  </Box>
);

Link

@deprecated Préférer les variants primary, secondary ou tertiary.

export const Link = () => (
  <Box display="flex" flexDirection="row" gap={4}>
    <Button variant="link" title="Bouton link" />
    <Button variant="link" title="Disabled" disabled />
    <Button variant="link" title="Disabled" disabled startIcon="Pen" />
  </Box>
);

Icons

export const Icons = () => (
  <Box display="flex" flexDirection="row" gap={4}>
    <Button variant="primary" title="Start Icon" startIcon="Plus" />
    <Button variant="primary" title="End Icon" endIcon="Plus" />
    <Button variant="primary" title="End Icon" endIcon="Plus" />
    <ButtonIcon variant="primary" icon="CircleUser" />
    <ButtonIcon variant="primary" icon="CircleUser" />
  </Box>
);

FullWidth

export const FullWidth = () => <Button variant="primary" title="Full Width" fullWidth />;

Selected

export const Selected = () => (
  <Box display="flex" flexDirection="row" gap={4}>
    <Button variant="secondary" title="Selected" selected />
  </Box>
);

Active

Utilisé quand le bouton est actif (ex : quand un menu est ouvert).

export const Active = () => (
  <Box display="block">
    <Button variant="secondary" title="Active" active />
  </Box>
);

Le spinner n'apparaît qu'après

1 000 ms

(delay="long"). Ce délai évite un clignotement visuel quand l'opération se termine rapidement : si le serveur répond en moins d'une seconde, l'utilisateur ne voit jamais le spinner. Au-delà, le spinner s'affiche pour signaler que l'attente va durer. Appuyez sur le bouton pour simuler une opération de 3 secondes.

export const Loading = () => {
  const [isLoading, setIsLoading] = React.useState(false);
  const handlePress = () => {
    setIsLoading(true);
    setTimeout(() => setIsLoading(false), 3000);
  };
  return <Button variant="primary" title="Enregistrer" isLoading={isLoading} onPress={handlePress} />;
};

Alveole UI Kit — v1.8.4