Button Component

Buttons are essential UI elements that trigger actions when clicked. The Arts Oven UI Component Library provides a range of button styles and configurations to fit different design needs.

Button

<button class="btn">Default</button>

<button className="btn">Default</button>

Branding colors

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-error">Error</button>

<button className="btn btn-primary">Primary</button>
<button className="btn btn-secondary">Secondary</button>
<button className="btn btn-info">Info</button>
<button className="btn btn-warning">Warning</button>
<button className="btn btn-success">Success</button>
<button className="btn btn-error">Error</button>

Outline Button

<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-error">Error</button>

<button className="btn btn-outline-primary">Primary</button>
<button className="btn btn-outline-secondary">Secondary</button>
<button className="btn btn-outline-info">Info</button>
<button className="btn btn-outline-warning">Warning</button>
<button className="btn btn-outline-success">Success</button>
<button className="btn btn-outline-error">Error</button>

Soft Button

<button class="btn btn-primary btn-soft">Primary</button>
<button class="btn btn-secondary btn-soft">Secondary</button>
<button class="btn btn-info btn-soft">Info</button>
<button class="btn btn-warning btn-soft">Warning</button>
<button class="btn btn-success btn-soft">Success</button>
<button class="btn btn-error btn-soft">Error</button>

<button className="btn btn-primary btn-soft">Primary</button>
<button className="btn btn-secondary btn-soft">Secondary</button>
<button className="btn btn-info btn-soft">Info</button>
<button className="btn btn-warning btn-soft">Warning</button>
<button className="btn btn-success btn-soft">Success</button>
<button className="btn btn-error btn-soft">Error</button>

3D Button

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-error">Error</button>

<button className="btn btn-primary">Primary</button>
<button className="btn btn-secondary">Secondary</button>
<button className="btn btn-info">Info</button>
<button className="btn btn-warning">Warning</button>
<button className="btn btn-success">Success</button>
<button className="btn btn-error">Error</button>

Button Sizes

<button class="btn btn-primary btn-xs">Primary</button>
<button class="btn btn-secondary btn-sm">Secondary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning btn-lg">Warning</button>

<button className="btn btn-primary btn-xs">Primary</button>
<button className="btn btn-secondary btn-sm">Secondary</button>
<button className="btn btn-info">Info</button>
<button className="btn btn-warning btn-lg">Warning</button>

Wide Button

<button type="button" class="btn btn-wide">Sign Up</button>
<button type="button" class="btn btn-wide btn-secondary">Login</button>

<button type="button" className="btn btn-wide">Sign Up</button>
<button type="button" className="btn btn-wide btn-secondary">Login</button>

Button Button

<button type="button" class="btn btn-warning block w-full">Wide</button>

<button type="button" className="btn btn-warning block w-full">Wide</button>

Link Block

<button type="button" class="btn btn-warning block w-full">Wide</button>

<button type="button" className="btn btn-warning block w-full">Wide</button>

Adding Shadows and Gradients

You can enhance your buttons with shadows and gradients by enabling these features in your tailwind.config configuration:

artsovenui: {
    shadow: true,
    gradients: true,
},

Contribute ideas!

Share Your Ideas! While we can’t guarantee that every request will be added, we will definitely consider your suggestions for future updates.