---
description: Sample Button with customizable
---

# Buttons

<figure><img src="https://868272446-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYR5c0a9XvTkGUPJXw69m%2Fuploads%2FM3R1NlukvLimrFnU30E1%2Fcover.png?alt=media&#x26;token=ccbacfbc-e4bb-4bb5-9ec4-d5f787f345c5" alt=""><figcaption></figcaption></figure>

### Params

<table><thead><tr><th width="89" data-type="checkbox"> </th><th width="154">Param</th><th width="221">value</th><th>Use for</th></tr></thead><tbody><tr><td>true</td><td>type</td><td>tailwindcss class name</td><td>divide columns for contents</td></tr><tr><td>true</td><td>class</td><td>tailwindcss classes</td><td>optional style</td></tr><tr><td>true</td><td>size</td><td>tailwindcss class name</td><td>text-sizing</td></tr><tr><td>true</td><td>onclick</td><td>optional function</td><td>optional function</td></tr><tr><td>true</td><td>onmouseover</td><td>optional function</td><td>optional function</td></tr><tr><td>true</td><td>ripple</td><td></td><td>ripple effects</td></tr></tbody></table>

## **Components Laravel**

{% tabs %}
{% tab title="Default " %}
{% code lineNumbers="true" %}
```html
<x-button type="button" 
    class="text-white bg-primary-500" 
    ripple
    >
    Submit
</x-button>
```
{% endcode %}

{% content-ref url="buttons/default-button" %}
[default-button](buttons/default-button)
{% endcontent-ref %}
{% endtab %}

{% tab title="Primary " %}
{% code lineNumbers="true" %}
```html
<x-button:primary 
    type="button" 
    ripple
    >
    Submit
</x-button:primary>
```
{% endcode %}

{% content-ref url="buttons/primary-button" %}
[primary-button](buttons/primary-button)
{% endcontent-ref %}
{% endtab %}

{% tab title="Secondary " %}
{% code lineNumbers="true" %}
```html
<x-button:secondary 
    type="button" 
    ripple
>
    Submit
</x-button:secondary>
```
{% endcode %}

{% content-ref url="buttons/secondary-button" %}
[secondary-button](buttons/secondary-button)
{% endcontent-ref %}
{% endtab %}

{% tab title="Warning " %}
{% code lineNumbers="true" %}
```html
<x-button:warning 
    type="button" 
    ripple
>
    Submit
</x-button:warning>
```
{% endcode %}

{% content-ref url="buttons/warning-button" %}
[warning-button](buttons/warning-button)
{% endcontent-ref %}
{% endtab %}

{% tab title="Danger " %}
{% code lineNumbers="true" %}
```html
<x-button:danger 
    type="button" 
    ripple
>
    Submit
</x-button:danger>
```
{% endcode %}

{% content-ref url="buttons/danger-button" %}
[danger-button](buttons/danger-button)
{% endcontent-ref %}
{% endtab %}

{% tab title="Success " %}
{% code lineNumbers="true" %}
```html
<x-button:success 
    type="button" 
    ripple
>
    Submit
</x-button:success>
```
{% endcode %}

{% content-ref url="buttons/success-button" %}
[success-button](buttons/success-button)
{% endcontent-ref %}
{% endtab %}
{% endtabs %}
