diff --git a/src/resources/views/components/button.blade.php b/src/resources/views/components/button.blade.php
index 277ba0f..f029993 100644
--- a/src/resources/views/components/button.blade.php
+++ b/src/resources/views/components/button.blade.php
@@ -5,9 +5,7 @@
     'has_spinner' => 'false', // will show a spinner
     'show_spinner' => 'false', // will show a spinner
     'can_submit' => 'false', // will make this <button type="submit">
-    'onclick' => '', // a function to call onclick on the button
     'disabled' => 'false', // set to true to disable the button
-    'css' => '',
     'color' => 'blue', // red, yellow, green, blue, purple, orange, cyan, black
     'coloring' => [
         'bg' => [
@@ -48,11 +46,12 @@
 @php 
     $button_type = ($can_submit == 'false') ? 'button' : 'submit'; 
     $spinner_css = ($show_spinner == 'true') ? '' : 'hidden'; 
+    $primary_color = ($type=='primary') ? $coloring['bg'][$color]. ' '. $coloring['focus'][$color]. ' '. $coloring['hover_active'][$color] : '';
+    $is_disabled = ($disabled == 'true') ? 'disabled' : '';
 @endphp
 <button 
-    @if ($onclick !== '') onclick="{!! $onclick !!}" @endif 
+    {{ $attributes->merge(['class' => "bw-button $size $type $name $primary_color $is_disabled"]) }}
     @if ($disabled == 'true') disabled="true" @endif
-    type="{{$button_type}}"
-    class="bw-button {{$size}} {{$type}} {{$name}} {{$css}} @if($type=='primary'){{$coloring['bg'][$color]}} {{$coloring['focus'][$color]}} {{$coloring['hover_active'][$color]}}@endif @if ($disabled == 'true')disabled @endif">
+    type="{{$button_type}}">
     <span>{{ $slot }}</span> @if ($has_spinner == 'true') <x-bladewind::spinner css="{{$spinner_css}}"></x-bladewind::spinner> @endif
 </button>
\ No newline at end of file
diff --git a/src/resources/views/components/input.blade.php b/src/resources/views/components/input.blade.php
index 913de55..df2d379 100644
--- a/src/resources/views/components/input.blade.php
+++ b/src/resources/views/components/input.blade.php
@@ -13,10 +13,12 @@
 @php
     $name = preg_replace('/[\s-]/', '_', $name);
     $required_symbol = ($label == '' && $required == 'true') ? ' *' : '';
+    $is_required = ($required == 'true') ? 'required' : '';
+    $placeholder_color = ($label !== '') ? 'placeholder-transparent' : '';
 @endphp
 <div class="relative w-full @if($add_clearing == 'true') mb-2 @endif">
     <input 
-        class="bw-input w-full border border-slate-300/50 dark:text-white/80 dark:border-slate-700 dark:bg-slate-600 dark:focus:border-slate-900 peer @if($required == 'true') required @endif {{$name}} {{$css}} @if($label !== '')placeholder-transparent @endif"
+        {{ $attributes->merge(['class' => "bw-input w-full border border-slate-300/50 dark:text-white/80 dark:border-slate-700 dark:bg-slate-600 dark:focus:border-slate-900 peer $is_required $name $css $placeholder_color"]) }}
         type="{{ $type }}" 
         id="{{ $name }}"
         name="{{ $name }}" 
diff --git a/src/resources/views/components/textarea.blade.php b/src/resources/views/components/textarea.blade.php
index 4b0d4cf..0f98ad4 100644
--- a/src/resources/views/components/textarea.blade.php
+++ b/src/resources/views/components/textarea.blade.php
@@ -12,10 +12,14 @@
 @php
     $name = preg_replace('/[\s-]/', '_', $name);
     $required_symbol = ($label == '' && $required == 'true') ? ' *' : '';
+    $is_required = ($required == 'true') ? 'required' : '';
+    $placeholder_color = ($label !== '') ? 'placeholder-transparent' : '';
 @endphp
 <div class="relative w-full @if($add_clearing == 'true') mb-2 @endif">
-    <textarea class="bw-input w-full border border-slate-300/50 dark:border-slate-700 dark:bg-gray-700/90 dark:focus:border-slate-900 peer @if($required == 'true') required @endif {{$name}} {{$css}} @if($label !== '')placeholder-transparent @endif"
-        id="{{ $name }}" name="{{ $name }}" placeholder="{{ ($label !== '') ? $label : $placeholder }}{{$required_symbol}}">{{ $selected_value }}</textarea>
+    <textarea {{ $attributes->merge(['class' => "bw-input w-full border border-slate-300/50 dark:border-slate-700 dark:bg-gray-700/90 dark:focus:border-slate-900 peer $is_required $name $css $placeholder_color"]) }} 
+        id="{{ $name }}" 
+        name="{{ $name }}" 
+        placeholder="{{ ($label !== '') ? $label : $placeholder }}{{$required_symbol}}">{{ $selected_value }}</textarea>
     @if($label !== '')
         <label for="{{ $name }}" class="form-label bg-white text-blue-900/40 dark:bg-gray-700/90 dark:text-gray-400" onclick="dom_el('.{{$name}}').focus()">{{ $label }} 
             @if($required == 'true') <span class="text-red-400/80" style="zoom:90%"><svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 inline-block -mt-1" viewBox="0 0 20 20" fill="currentColor">