STA-TailwindCss/Buttons

Introduction

These shiny button components made for Tailwind CSS are convenient tools when you need more traditional actions. Enjoy your care packet that has many easy to use button styles, which you can customize or override to fit your needs.

Checkout the demonstration site: https://sirthxalot.github.io/tailwindcss-buttons/

This plugin has been designed to be compatible with the Tailwind CSS framework (^3.0).

Installation

STEP-01: Install Dependencies

Install the dependencies via NPM or Yarn by executing the following command:

npm install -D @sta-tailwindcss/buttons

STEP-02: Enable Tailwind CSS Plugin

Require the plugin (@sta-tailwindcss/buttons) within your Tailwind CSS configuration file (tailwind.config.js):

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@sta-tailwindcss/buttons'),
    // ...
  ],
}

Getting Started

Basics

A basic button can be created with minimal markup - all you need to do is to add the .button CSS class to turn anything into a button. Because buttons can be used for many purposes, it's important to use the right tag.

<button class="button" type="button">default button</button>
<a class="button" href="#an-anchor" role="button">hyperlink button</a>
<span class="button" role="button">any tag button</span>

Sizing

Additional classes can be added to your button to change its size and shape.

<button class="button tiny" type="button">tiny button</button>
<button class="button small" type="button">small button</button>
<button class="button large" type="button">large button</button>
<button class="button expanded" type="button">expanded button</button>

Disabled Buttons

The .disabled CSS class will give buttons a faded appearance. The class is a purely visual style, and won't actually disable a control. For <button> elements, you can add the disabled attribute to both disable and style it. If you want to disable a link, you should add the aria-disabled attribute to mark it as disabled for assistive technology.

<a class="button" href="#" aria-disabled>disabled hyperlink</a>
<button class="button" type="button" disabled>disabled button</button>
<span class="button disabled">disabled element</span>

Dropdown Arrow

Add a dropdown arrow CSS icon to your button with the .dropdown class.

<button class="button dropdown">dropdown button</button>

Button Types

Buttons which uses the submit or reset type attribute have their own predefined color.

<button class="button" type="submit">submit button</button>
<button class="button" type="reset">reset button</button>

Coloring

Add color classes to give buttons additional meaning:

<button class="button submit">submit color</button>
<button class="button reset">reset color</button>
<button class="button info">info color</button>
<button class="button success">success color</button>
<button class="button warning">warning color</button>
<button class="button alert">alert color</button>

Or overwrite the colors with your own flavor:

<button class="button bg-violet-500 active:bg-violet-700 focus:!bg-violet-700 hover:!bg-violet-700">custom color</button>
<button class="button bg-white active:bg-white focus:!bg-white hover:!bg-white text-lime-500 active:text-lime-700 focus:!text-lime-700 hover:!text-lime-700 border-lime-500 active:border-lime-700 focus:border-lime-700 hover:border-lime-700">hollow</button>

Note
Buttons are using background, border and text colors. They are also using different colors for the :active, :focus and :hover state.

Button Group

Button groups are containers for related action items. They're great when you need to display a group of actions in a bar.

Add the .button-group class to a container, and inside it place any number of buttons. The buttons are separated by a small border.

<div class="button-group">
    <a class="button">One</a>
    <a class="button">Two</a>
    <a class="button">Three</a>
</div>

Button groups can be sized with the same classes as standard buttons: .tiny, .small, and .large.

<div class="tiny button-group">
    <a class="button">One</a>
    <a class="button">Two</a>
    <a class="button">Three</a>
</div>

When using a single color for the button-group, you might want to remove the 1px spacing between the buttons. You can use .no-gaps to just the same.

<div class="no-gaps button-group">
    <a class="button">One</a>
    <a class="button">Two</a>
    <a class="button">Three</a>
</div>

Add the .expanded class to the container to make a full-width button group. Each item will automatically size itself based on how many buttons there are, up to a maximum of six.

<div class="expanded button-group">
    <a class="button">Expanded</a>
    <a class="button">Button</a>
    <a class="button">Group</a>
</div>

Configuration

There are plenty of ways how you can customize your buttons. One simple but global change can be done within the theme configuration.

Font Setup

Border Setup

Size Setup

Disabled Buttons Setup

Alert Color Setup

Base Color Setup

Info Color Setup

Reset Color Setup

Submit Color Setup

Success Color Setup

Warning Color Setup

Browser Support

We support the latest, stable releases of all major browsers.

21+ ✔	20+ ✔	12+ ✔	15+ ✔	9+ ✔

Note
The components has been tested within Google Chrome (v108.0.5359.99) 64-Bit version on Windows.

License

This open-sourced software is licensed under the MIT license.