Knappvarianter och tillstånd

Knappar är några av de mest interaktiva elementen på en sida, och användare förlitar sig på visuella signaler för att förstå deras syfte. Knappvarianter kommunicerar avsikten: en primär knapp driver huvudåtgärden, en sekundär knapp erbjuder ett alternativ och en outline- eller ghost-knapp erbjuder ett mer diskret alternativ.

Med Tailwind uppnår ni allt detta utan att skriva någon egen CSS. Varje variant är helt enkelt en annan kombination av utility-klasser som tillämpas på samma <button>-element.

En primär knapp använder en heltäckande bakgrundsfärg för att dra till sig maximal uppmärksamhet. Mönstret kombinerar padding-utilities, en bakgrundsfärg, vit text och en klass för rundade hörn.

Genom att lägga till hover:bg-blue-700 blir knappen mörkare när pekaren förs över den, vilket ger tydlig återkoppling om att elementet är interaktivt. Klassen font-semibold ökar textens visuella tyngd.

En sekundär knapp använder en ljusare bakgrund för att signalera en mindre framträdande åtgärd. En outline-knapp tar bort fyllningen helt och visar bara en kantlinje genom att använda border border-blue-600 text-blue-600 på en transparent bakgrund.

Vid hover kan outline-knappar fyllas med en ljus bakgrund, som hover:bg-blue-50, för att ge visuell återkoppling utan att överglänsa den primära knappen i närheten.

En ghost-knapp har som standard ingen bakgrund och ingen synlig kantlinje och ser ut som formaterad text tills användaren interagerar med den. Den här varianten passar bra för åtgärder med låg betoning, som att avbryta eller stänga.

Genom att använda hover:bg-gray-100 visas en diskret fyllning vid hover, och text-gray-700 håller texten läsbar utan att dra uppmärksamheten från primära åtgärder.

En destruktiv knapp använder röda nyanser för att varna användare för oåterkalleliga åtgärder, som att ta bort data. Färgen signalerar fara utan att användaren behöver läsa etiketten noggrant.

Kombinera bg-red-600 med ett tydligt hover-tillstånd, hover:bg-red-700, och kombinera alltid knappen med en bekräftelsedialog för att förhindra oavsiktliga åtgärder.

När en knapp ännu inte kan användas – till exempel medan ett formulär skickas – bör ni kommunicera detta visuellt med ett inaktiverat tillstånd. Tailwind tillhandahåller variantprefixet disabled: för exakt detta ändamål.

Använd disabled:opacity-50 disabled:cursor-not-allowed för att tona ned knappen och ändra pekaren, vilket signalerar att den inte kan klickas. Använd alltid HTML-attributet disabled tillsammans med dessa klasser för korrekt tillgänglighet.

Ett vanligt mönster är att visa en laddningsspinner i en knapp medan en asynkron åtgärd slutförs. Ni kan använda Tailwinds animate-spin på en SVG-ikon som placeras före etiketttexten.

Använd inline-flex items-center gap-2 på knappen för att rikta in spinnern och texten sida vid sida, och lägg till pointer-events-none under laddningen för att förhindra dubbla skickanden.

Olika sammanhang kräver olika knappstorlekar. En liten knapp är användbar i täta gränssnitt, som tabeller, medan en extra stor knapp fungerar bra som en framträdande CTA.

Definiera storlekar genom att variera värdena för px-*, py-* och text-*. En vanlig skala är sm (px-3 py-1.5 text-sm), md (px-5 py-2.5 text-base) och lg (px-6 py-3 text-lg).

Ikonknappar använder endast en ikon utan en synlig etikett och måste därför ha ett tillgängligt aria-label-attribut. Formge dem som en kvadrat med lika stor padding: p-2 skapar en kompakt klickbar yta runt ikonen.

För knappar med ikon och text använder ni inline-flex items-center gap-2 för att rikta in SVG-ikonen vertikalt med textetiketten oavsett teckenstorlek.

En knapp med full bredd använder w-full för att sträcka sig över hela sin behållare, vilket är vanligt i mobila layouter och vid formulärskick. Genom att lägga till justify-center ser ni till att etiketten förblir centrerad.

En knappgrupp sammanfogar flera knappar sida vid sida. Ta bort den rundade kanten från knapparna i mitten och använd negativa marginaler för att sammanfoga kantlinjerna: first:rounded-l-lg last:rounded-r-lg border-r-0 skapar ett enhetligt utseende som ett piller.

Varje knappvariant behöver en synlig fokusindikator för tangentbordsanvändare. Tailwinds focus:ring-*-utilities skapar en färgad ring utanför knappens kantlinje utan att påverka layouten.

Ett bra mönster är focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2. ring-offset-2 lägger till ett litet vitt mellanrum mellan knappen och ringen, så att den framträder mot färgade bakgrunder. Använd focus-visible:ring-2 för att visa ringen endast vid tangentbordsnavigering.

I den här lektionen har ni lärt er att primära, sekundära, outline- och ghost-knappvarianter byggs genom att kombinera utilities för bakgrunds-, kantlinje- och textfärg; att interaktiva tillstånd som hover, aktiv, inaktiverad och laddning hanteras med Tailwinds variantprefix; samt att fokusringar med focus-visible:ring-2 säkerställer tangentbordstillgänglighet utan att störa musinteraktioner. Härnäst utforskar vi mönster för card-komponenter.