Renamed base to tag and button to base

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.muted>Muted</x-rapidez::button.muted>
+                <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>

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>

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('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') }}>
+<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>

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 hover:bg-opacity-80 text-conversion-text border-b border-b-black/20') }}>
+<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>

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>

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 border-b border-b-black/20 hover:bg-opacity-80') }}>
+<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>

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 border-b border-b-black/20 hover:bg-opacity-80') }}>
+<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>
+</x-rapidez::button.base>

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('bg-white p-0 rounded-full size-12 border hover:border-emphasis') }}>
+<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>

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>