Boutons pilule

L'interaction signature de trc-ui : une pilule fine avec une pastille ronde d'accent. Au survol, la pastille s'étire jusqu'à remplir la pilule et le libellé fonce.

Bordée et pleine

Survolez les pilules, ou atteignez-les avec la touche Tab : le focus clavier joue la même animation. La pilule pleine marque l'action principale ; une seule par écran.

<PillButton solid>Créer un compte</PillButton>
<PillButton>Commencer</PillButton>

Taille compacte

<PillButton size="sm">Se connecter</PillButton>
<PillButton size="sm" solid>Commencer</PillButton>

En lien

PillLink rend la même pilule sous forme de <a>. Passez le composant de lien de votre routeur avec as pour garder la navigation côté client.

<PillLink href="#">Lire la documentation</PillLink>

import Link from "next/link";
import { PillLink } from "trc-ui";

<PillLink as={Link} href="/pricing">Voir les tarifs</PillLink>

L'exception Retour

Les pilules ne portent pas d'autre icône que leur flèche. Seule exception : revenir en arrière, avec une flèche vers la gauche.

import { ArrowLeft, PillButton } from "trc-ui";

<PillButton icon={<ArrowLeft />}>Retour</PillButton>

Chargement et désactivé

loading remplace la flèche par un indicateur, désactive le bouton et l'annonce comme occupé. Une pilule désactivée ne s'étire pas au survol.

<PillButton loading>Envoi</PillButton>
<PillButton disabled>Indisponible</PillButton>

Comment marche l'étirement

La pastille et le remplissage sont une seule forme, qui grandit de la largeur de la pastille jusqu'à toute la pilule, sous la bordure, avec une courbe ease-in-out-quart en 500 ms. Le libellé fonce 150 ms après le départ du remplissage, et s'éclaircit tout de suite à la sortie : il reste lisible à chaque image. Sur écran tactile, pas de survol : la pilule reste au repos. Avec le mouvement réduit, le changement est instantané.

:root {
  --trc-ease: cubic-bezier(0.77, 0, 0.175, 1);
  --trc-duration: 500ms;
}

PillButton

PillLink