Button

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

Default

HTML

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

JSX

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

Branding colors

PrimarySecondaryInfoWarningSuccessError

HTML

<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>

JSX

<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

PrimarySecondaryInfoWarningSuccessError

HTML

<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>

JSX

<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>

Button Sizes

PrimarySecondaryInfoWarning

HTML

<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>

JSX

<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>

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,
},

Conclusion

The Buttons component in the Arts Oven UI Component Library provides a flexible and easy-to-use solution for creating interactive elements in your applications. Explore the various styles and customization options to create buttons that fit your design needs perfectly! For more components and detailed documentation, refer to our main documentation page.