Boutons

Overshoot icon button

Une pilule pâle avec un grand glyphe illustré garé à son extrémité gauche qui tire vers l'extérieur au-delà du bord et revient en vol stationnaire ou en mise au point.

Utiliser Overshoot icon button

Une pilule pâle avec un grand glyphe illustré garé à son extrémité gauche qui tire vers l'extérieur au-delà du bord et revient en vol stationnaire ou en mise au point.

Testez l’aperçu avec la souris et le clavier, puis vérifiez la visibilité du focus et la mise en page sur un écran étroit. Indiquez le numéro ou l’identifiant du composant à votre agent de programmation.

Propriétés: label, accent, slide, springy, radius

Quels frameworks sont disponibles ?

Le catalogue propose ces versions : react, vue, svelte, astro, html. L’aperçu de cette page utilise React.

Comment accéder à l’implémentation ?

Le code, les versions et les commandes d’installation sont disponibles dans le panneau ci-dessus.

Connectez votre agent

Composants proches

2714Expanding icon pillBoutonsUn bouton d'icône rond qui s'étire en une pilule étiquetée au survol, échangeant son glyphe contre un mot à mesure qu'un remplissage d'accent arrive.

Glide swap button

2715Glide swap buttonBoutonsUn bouton de largeur fixe qui fait glisser son étiquette du bord droit tandis que le glyphe glisse vers le centre, le tout reposant sur un rebord de couleur dure sur lequel le bouton tombe lorsqu'on appuie dessus.

Label swap slide button

2523Label swap slide buttonBoutonsUne pilule bordée qui échange tout son contenu en survol : la rangée de repos glisse vers le haut et vers l'extérieur tandis qu'une deuxième rangée avec sa propre icône et sa propre couleur glisse par le bas.

Ring halo pill button

2521Ring halo pill buttonBoutonsUn bouton de pilule qui maintient un espace clair autour de son noyau coloré, remplit cet espace avec un anneau d'accent allégé lors du survol ou de la mise au point du clavier, et se serre vers l'intérieur lorsqu'il est enfoncé.

2485Rocking icon CTABoutonsUne pilule d'accent solide dont l'icône de calendrier principale bascule comme un métronome en survol et, lorsque vous cliquez dessus, dessine une coche et remplace le libellé par une étiquette confirmée avant de revenir en arrière.

Slide under download button

2513Slide under download buttonBoutonsUn bouton étiqueté qui fait glisser un plateau d'action lumineux hors de sa plaque en survol ou en mise au point, avec une flèche de téléchargement qui bouge à l'intérieur du plateau.