From 87f3c077a0e292484d0392eb4fd2e5ce8e68d85b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 3 Jul 2024 13:30:21 +0300
Subject: [PATCH] Add active state

---
 .../doc/theming/unstyled/ExampleDoc.vue       | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/showcase/doc/theming/unstyled/ExampleDoc.vue b/apps/showcase/doc/theming/unstyled/ExampleDoc.vue
index d882ef831..68adfdde6 100644
--- a/apps/showcase/doc/theming/unstyled/ExampleDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/ExampleDoc.vue
@@ -5,7 +5,14 @@
             <i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style.
         </p>
         <div class="card flex justify-center">
-            <Button label="Search" icon="pi pi-search" unstyled pt:root="bg-teal-500 hover:bg-teal-700 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2" pt:label="text-white font-bold text-lg" pt:icon="text-white text-xl" />
+            <Button
+                label="Search"
+                icon="pi pi-search"
+                unstyled
+                pt:root="bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2"
+                pt:label="text-white font-bold text-lg"
+                pt:icon="text-white text-xl"
+            />
         </div>
         <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
     </DocSectionText>
@@ -17,10 +24,14 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Search" icon="pi pi-search" unstyled
-    pt:root="bg-teal-500 hover:bg-teal-700 cursor-pointer py-3 px-4 rounded-full border-0 flex gap-2"
-    pt:label="text-white font-bold text-xl"
-    pt:icon="text-white text-2xl" />
+<Button
+    label="Search"
+    icon="pi pi-search"
+    unstyled
+    pt:root="bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2"
+    pt:label="text-white font-bold text-lg"
+    pt:icon="text-white text-xl"
+/>
 `
             }
         };