diff --git a/.github/media/buttons.png b/.github/media/buttons.png
index 71538ee..0ae87a7 100644
Binary files a/.github/media/buttons.png and b/.github/media/buttons.png differ
diff --git a/README.md b/README.md
index 53c4a67..2d716f9 100644
--- a/README.md
+++ b/README.md
@@ -28,13 +28,14 @@ The base button doesn't have any styling; here, we only use the `x-rapidez::tag`
 ![](.github/media/buttons.png)
 
 - [Base](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/base.blade.php)
-- [Button](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/button.blade.php)
+- [Default](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/button.blade.php)
 - [Primary](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/primary.blade.php)
 - [Secondary](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/secondary.blade.php)
 - [Outline](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/outline.blade.php)
 - [Conversion](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/conversion.blade.php)
 - [Slider](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/slider.blade.php)
 
+
 ## Installation
 
 ```
@@ -172,24 +173,6 @@ Make sure to add this class to your body tag to prevent scrolling when the slide
 <body class="has-[.prevent-scroll:checked]:overflow-clip">
 ```
 
-#### Slideover
-
-```blade
-<label for="my-slideover">
-    Open Slideover
-</label>
-
-<x-rapidez::slideover id="my-slideover" title="Example Slideover">
-    Your slideover content goes here
-</x-rapidez::slideover>
-```
-
-Make sure to add this class to your body tag to prevent scrolling when the slideover is open:
-
-```html
-<body class="has-[.slideover-checkbox:checked]:overflow-hidden">
-```
-
 #### Tag
 
 It is a Blade version of a [dynamic Vue component](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)
diff --git a/demo/components.html b/demo/components.html
index ad2982e..5c52ea9 100644
--- a/demo/components.html
+++ b/demo/components.html
@@ -81,7 +81,7 @@ <h3 class="font-bold text-md">Components with a required label</h3>
 
                 <fieldset>
                     <legend>Input</legend>
-                    <input class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-inactive [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500" />
+                    <input class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500" />
                 </fieldset>
 
                 <fieldset>
@@ -90,7 +90,7 @@ <h3 class="font-bold text-md">Components with a required label</h3>
                         <span class="font-medium text-muted text-sm block mb-2 has-[~_*_:required,~:required]:after:content-['*']">
     Something
 </span>
-                        <input class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-inactive [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500" />
+                        <input class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500" />
                     </label>
                 </fieldset>
 
@@ -100,7 +100,7 @@ <h3 class="font-bold text-md">Components with a required label</h3>
                         <span class="font-medium text-muted text-sm block mb-2 has-[~_*_:required,~:required]:after:content-['*']">
     Something
 </span>
-                        <input required="required" class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-inactive [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500" />
+                        <input required="required" class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500" />
                     </label>
                 </fieldset>
 
@@ -148,7 +148,7 @@ <h3 class="font-bold text-md">Components with a required label</h3>
 
                 <fieldset>
                     <legend>Select</legend>
-                    <select class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-muted">
+                    <select class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted">
     <option>Option</option>
 </select>
                 </fieldset>
@@ -159,7 +159,7 @@ <h3 class="font-bold text-md">Components with a required label</h3>
                         <span class="font-medium text-muted text-sm block mb-2 has-[~_*_:required,~:required]:after:content-['*']">
     Something
 </span>
-                        <select class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-muted">
+                        <select class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted">
     <option>Option</option>
 </select>
                     </label>
@@ -171,7 +171,7 @@ <h3 class="font-bold text-md">Components with a required label</h3>
                         <span class="font-medium text-muted text-sm block mb-2 has-[~_*_:required,~:required]:after:content-['*']">
     Something
 </span>
-                        <select required="required" class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-muted">
+                        <select required="required" class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted">
     <option>Option</option>
 </select>
                     </label>
@@ -179,7 +179,7 @@ <h3 class="font-bold text-md">Components with a required label</h3>
 
                 <fieldset>
                     <legend>Textarea</legend>
-                    <textarea class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-muted"></textarea>
+                    <textarea class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted"></textarea>
                 </fieldset>
 
                 <fieldset>
@@ -188,7 +188,7 @@ <h3 class="font-bold text-md">Components with a required label</h3>
                         <span class="font-medium text-muted text-sm block mb-2 has-[~_*_:required,~:required]:after:content-['*']">
     Something
 </span>
-                        <textarea class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-muted"></textarea>
+                        <textarea class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted"></textarea>
                     </label>
                 </fieldset>
 
@@ -198,29 +198,29 @@ <h3 class="font-bold text-md">Components with a required label</h3>
                         <span class="font-medium text-muted text-sm block mb-2 has-[~_*_:required,~:required]:after:content-['*']">
     Something
 </span>
-                        <textarea required="required" class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-muted"></textarea>
+                        <textarea required="required" class="w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted"></textarea>
                     </label>
                 </fieldset>
             </div>
 
             <h2 class="font-bold text-lg">Button components</h2>
             <div class="grid grid-cols-5 gap-5">
-                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed">
-    Button
-</button>                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-primary text-primary-text">
+                <button class="inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5 bg text-muted hover:text hover:bg-emphasis border-b border-b-black/10">
+    Default
+</button>                <button class="inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5 bg-primary text-primary-text border-b border-b-black/20 hover:bg-opacity-80">
     Primary
-</button>                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-secondary text-secondary-text">
+</button>                <button class="inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5 bg-secondary text-secondary-text border-b border-b-black/20 hover:bg-opacity-80">
     Secondary
-</button>                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-transparent border text-default hover:border-emphasis">
+</button>                <button class="inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5 bg-transparent border text-default hover:border-emphasis">
     Outline
-</button>                <button class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-conversion text-conversion-text">
+</button>                <button class="inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5 bg-conversion hover:bg-opacity-80 text-conversion-text border-b border-b-black/20">
     Conversion
 </button>                <div class="flex flex-col gap-2">
                     <strong>Slider:</strong>
                     <div class="flex items-center gap-2">
-                        <button class="relative text transition bg text-base font-medium min-h-12 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border">
+                        <button class="inline-flex items-center justify-center transition font-medium text-base min-h-12 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5 bg-white p-0 rounded-full size-12 border hover:border-emphasis">
     &lt;
-</button>                        <button class="relative text transition bg text-base font-medium min-h-12 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border">
+</button>                        <button class="inline-flex items-center justify-center transition font-medium text-base min-h-12 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5 bg-white p-0 rounded-full size-12 border hover:border-emphasis">
     &gt;
 </button>                    </div>
                 </div>
@@ -281,7 +281,7 @@ <h2 class="text-lg font-bold mt-8">Slideover Component</h2>
                 <div class="flex flex-col gap-3">
                     <h3 class="text-md font-bold">Default</h3>
                     <div>
-                        <label class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-primary text-primary-text" for="default-slideover">
+                        <label class="inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5 bg-primary text-primary-text border-b border-b-black/20 hover:bg-opacity-80" for="default-slideover">
     Open Slideover
 </label>                        <div >
     <input id="close-default-slideover" class="hidden" type="reset">
@@ -317,7 +317,7 @@ <h3 class="text-md font-bold">Default</h3>
                 <div class="flex flex-col gap-3">
                     <h3 class="text-md font-bold">Right-positioned</h3>
                     <div>
-                        <label class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-secondary text-secondary-text" for="right-slideover">
+                        <label class="inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5 bg-secondary text-secondary-text border-b border-b-black/20 hover:bg-opacity-80" for="right-slideover">
     Open Right Slideover
 </label>                        <div >
     <input id="close-right-slideover" class="hidden" type="reset">
@@ -352,7 +352,7 @@ <h3 class="text-md font-bold">Right-positioned</h3>
                 <div class="flex flex-col gap-3">
                     <h3 class="text-md font-bold">Mobile only</h3>
                     <div>
-                        <label class="relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed bg-transparent border text-default hover:border-emphasis lg:hidden" for="mobile-slideover">
+                        <label class="inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5 bg-transparent border text-default hover:border-emphasis lg:hidden" for="mobile-slideover">
     Open Mobile Slideover
 </label>                        <div >
     <input id="close-mobile-slideover" class="hidden" type="reset">
diff --git a/resources/views/components-preview.blade.php b/resources/views/components-preview.blade.php
index bc6d726..0d8f161 100644
--- a/resources/views/components-preview.blade.php
+++ b/resources/views/components-preview.blade.php
@@ -185,7 +185,7 @@ function color(variable, fallback) {
 
             <h2 class="font-bold text-lg">Button components</h2>
             <div class="grid grid-cols-5 gap-5">
-                <x-rapidez::button>Button</x-rapidez::button>
+                <x-rapidez::button>Default</x-rapidez::button>
                 <x-rapidez::button.primary>Primary</x-rapidez::button.primary>
                 <x-rapidez::button.secondary>Secondary</x-rapidez::button.secondary>
                 <x-rapidez::button.outline>Outline</x-rapidez::button.outline>
diff --git a/resources/views/components/button/base.blade.php b/resources/views/components/button/base.blade.php
index 096815c..e5d2d5b 100644
--- a/resources/views/components/button/base.blade.php
+++ b/resources/views/components/button/base.blade.php
@@ -1,30 +1,12 @@
 {{--
-This is the base for all the buttons. In here we don't need classes.
-If you want to change styling for buttons go to the button/button.
-- `href` attribute results in an `<a>`
-- `for` attribute results in a `<label>`
-- Fallback/default is `<button>`
-Examples:
-
-```
-<x-rapidez::button href="something">Something</x-rapidez::button>
-```
-
-```
-<x-rapidez::button for="something">Something</x-rapidez::button>
-```
+This is the default button if you use the example you get this.
+It is not recommended to use this button. Make use of the other buttons. ie: `button/primary`
+Example:
 
 ```
 <x-rapidez::button>Something</x-rapidez::button>
 ```
 --}}
-@props(['tag' => 'button'])
-
-@php
-    $tag = $attributes->hasAny('href', ':href', 'v-bind:href', 'x-bind:href') ? 'a' : $tag;
-    $tag = $attributes->has('for') ? 'label' : $tag;
-@endphp
-
-<x-rapidez::tag is="{{ $tag }}" {{ $attributes }}>
+<x-rapidez::button.tag {{ $attributes->twMerge('inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5') }}>
     {{ $slot }}
-</x-rapidez::tag>
+</x-rapidez::button.tag>
diff --git a/resources/views/components/button/button.blade.php b/resources/views/components/button/button.blade.php
index 3731264..f36ae42 100644
--- a/resources/views/components/button/button.blade.php
+++ b/resources/views/components/button/button.blade.php
@@ -1,12 +1,10 @@
 {{--
-This is the default button if you use the example you get this.
-It is not recommended to use this button. Make use of the other buttons. ie: `button/primary`
+The muted button is a variant used for basic use cases.
 Example:
-
 ```
-<x-rapidez::button>Something</x-rapidez::button>
+<x-rapidez::button.muted>Something</x-rapidez::button.muted>
 ```
 --}}
-<x-rapidez::button.base {{ $attributes->twMerge('relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed') }}>
+<x-rapidez::button.base {{ $attributes->twMerge('bg text-muted hover:text hover:bg-emphasis border-b border-b-black/10') }}>
     {{ $slot }}
-</x-rapidez::button.base>
+</x-rapidez::button.base>
\ No newline at end of file
diff --git a/resources/views/components/button/conversion.blade.php b/resources/views/components/button/conversion.blade.php
index c600204..0cd0229 100644
--- a/resources/views/components/button/conversion.blade.php
+++ b/resources/views/components/button/conversion.blade.php
@@ -7,6 +7,6 @@
 <x-rapidez::button.conversion>Something</x-rapidez::button.conversion>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('bg-conversion text-conversion-text') }}>
+<x-rapidez::button.base {{ $attributes->twMerge('bg-conversion hover:bg-opacity-80 text-conversion-text border-b border-b-black/20') }}>
     {{ $slot }}
-</x-rapidez::button>
+</x-rapidez::button.base>
\ No newline at end of file
diff --git a/resources/views/components/button/outline.blade.php b/resources/views/components/button/outline.blade.php
index 1ecb0f4..59d4217 100644
--- a/resources/views/components/button/outline.blade.php
+++ b/resources/views/components/button/outline.blade.php
@@ -6,6 +6,6 @@
 <x-rapidez::button.outline>Something</x-rapidez::button.outline>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('bg-transparent border text-default hover:border-emphasis') }}>
+<x-rapidez::button.base {{ $attributes->twMerge('bg-transparent border text-default hover:border-emphasis') }}>
     {{ $slot }}
-</x-rapidez::button>
+</x-rapidez::button.base>
\ No newline at end of file
diff --git a/resources/views/components/button/primary.blade.php b/resources/views/components/button/primary.blade.php
index 7be892d..45550c4 100644
--- a/resources/views/components/button/primary.blade.php
+++ b/resources/views/components/button/primary.blade.php
@@ -3,6 +3,6 @@
 <x-rapidez::button.primary>Something</x-rapidez::button.primary>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('bg-primary text-primary-text') }}>
+<x-rapidez::button.base {{ $attributes->twMerge('bg-primary text-primary-text border-b border-b-black/20 hover:bg-opacity-80') }}>
     {{ $slot }}
-</x-rapidez::button>
+</x-rapidez::button.base>
diff --git a/resources/views/components/button/secondary.blade.php b/resources/views/components/button/secondary.blade.php
index 99ae33c..87f2d2b 100644
--- a/resources/views/components/button/secondary.blade.php
+++ b/resources/views/components/button/secondary.blade.php
@@ -3,6 +3,6 @@
 <x-rapidez::button.secondary>Something</x-rapidez::button.secondary>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('bg-secondary text-secondary-text') }}>
+<x-rapidez::button.base {{ $attributes->twMerge('bg-secondary text-secondary-text border-b border-b-black/20 hover:bg-opacity-80') }}>
     {{ $slot }}
-</x-rapidez::button>
\ No newline at end of file
+</x-rapidez::button.base>
\ No newline at end of file
diff --git a/resources/views/components/button/slider.blade.php b/resources/views/components/button/slider.blade.php
index 3e1b762..a26467e 100644
--- a/resources/views/components/button/slider.blade.php
+++ b/resources/views/components/button/slider.blade.php
@@ -3,6 +3,6 @@
 <x-rapidez::button.slider>Icon</x-rapidez::button.slider>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border') }}>
+<x-rapidez::button.base {{ $attributes->twMerge('bg-white p-0 rounded-full size-12 border hover:border-emphasis') }}>
     {{ $slot }}
-</x-rapidez::button>
+</x-rapidez::button.base>
diff --git a/resources/views/components/button/tag.blade.php b/resources/views/components/button/tag.blade.php
new file mode 100644
index 0000000..096815c
--- /dev/null
+++ b/resources/views/components/button/tag.blade.php
@@ -0,0 +1,30 @@
+{{--
+This is the base for all the buttons. In here we don't need classes.
+If you want to change styling for buttons go to the button/button.
+- `href` attribute results in an `<a>`
+- `for` attribute results in a `<label>`
+- Fallback/default is `<button>`
+Examples:
+
+```
+<x-rapidez::button href="something">Something</x-rapidez::button>
+```
+
+```
+<x-rapidez::button for="something">Something</x-rapidez::button>
+```
+
+```
+<x-rapidez::button>Something</x-rapidez::button>
+```
+--}}
+@props(['tag' => 'button'])
+
+@php
+    $tag = $attributes->hasAny('href', ':href', 'v-bind:href', 'x-bind:href') ? 'a' : $tag;
+    $tag = $attributes->has('for') ? 'label' : $tag;
+@endphp
+
+<x-rapidez::tag is="{{ $tag }}" {{ $attributes }}>
+    {{ $slot }}
+</x-rapidez::tag>
diff --git a/resources/views/components/input/input.blade.php b/resources/views/components/input/input.blade.php
index 258d37e..3d4ae64 100644
--- a/resources/views/components/input/input.blade.php
+++ b/resources/views/components/input/input.blade.php
@@ -14,4 +14,4 @@
 </label>
 ```
 --}}
-<input {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-inactive [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500') }} />
+<input {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500') }} />
diff --git a/resources/views/components/input/select/select.blade.php b/resources/views/components/input/select/select.blade.php
index b0b9dcc..fef9cad 100644
--- a/resources/views/components/input/select/select.blade.php
+++ b/resources/views/components/input/select/select.blade.php
@@ -18,6 +18,6 @@
 </label>
 ```
 --}}
-<select {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-muted') }}>
+<select {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted') }}>
     {{ $slot }}
 </select>
diff --git a/resources/views/components/input/textarea/textarea.blade.php b/resources/views/components/input/textarea/textarea.blade.php
index 81c4856..1de09fb 100644
--- a/resources/views/components/input/textarea/textarea.blade.php
+++ b/resources/views/components/input/textarea/textarea.blade.php
@@ -14,4 +14,4 @@
 </label>
 ```
 --}}
-<textarea {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-muted') }}>{{ $slot }}</textarea>
+<textarea {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted') }}>{{ $slot }}</textarea>
