Buttons
@sgroup/tailwind-plugins/buttons
The .btn class can be added to any element to display it as a button. However, care must be taken when applying to any elements outside of <button> and <input type="button"> to ensure that rendering is consistent across different browsers.
When using button classes on any non-semantic element for example <a> or <div> that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given the role="button" attribute to appropriately convey their purpose to assistive technologies such as screen readers.
The framework provides serveral predefined button styles, each serving its own purpose.
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-green">Success</button>
<button class="btn btn-red">Danger</button>
<button class="btn btn-orange">Warning</button>
Buttons also have a distinct hover and focus state. The focus state uses a "ring" for accessibility.
<button class="btn btn-primary">Regular</button>
<button class="btn btn-primary btn-hover">Hover</button>
<button class="btn btn-primary btn-focus">Focus</button>
<button class="btn btn-primary disabled">Disabled</button>
To adjust the size of buttons, include additional utility classes as required.
<button class="btn btn-primary px-2.5 py-1.5 text-xs">XS</button>
<button class="btn btn-primary px-3 py-2 text-sm leading-4">SM</button>
<button class="btn btn-primary px-4 py-2 text-sm">Base</button>
<button class="btn btn-primary px-4 py-2 text-base">LG</button>
<button class="btn btn-primary px-6 py-3 text-base">XL</button>
<a class="btn btn-primary inline-flex items-center" href="#" role="button">
<div class="icon mr-2 h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 352c-16.53 0-33.06-5.422-47.16-16.41L0 173.2V400C0 426.5 21.49 448 48 448h416c26.51 0 48-21.49 48-48V173.2l-208.8 162.5C289.1 346.6 272.5 352 256 352zM16.29 145.3l212.2 165.1c16.19 12.6 38.87 12.6 55.06 0l212.2-165.1C505.1 137.3 512 125 512 112C512 85.49 490.5 64 464 64h-416C21.49 64 0 85.49 0 112C0 125 6.01 137.3 16.29 145.3z"></path></svg>
</div>
Button
</a>
<a class="btn btn-primary inline-flex items-center" href="#" role="button">
Button
<div class="icon ml-2 h-3 w-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"></path></svg>
</div>
</a>
Loading state
A button with the .loading class can show a loading indicator. This will hide any text on the button.
<button class="btn btn-primary" :class="{ 'loading': buttonLoadingState }" @click.prevent="toggleButtonLoading">Click me!</button>
<script>
export default {
data() {
return {
buttonLoadingState: false,
}
},
methods: {
toggleButtonLoading() {
this.buttonLoadingState = true;
},
},
};
</script>
Configuration
Configure the @sgroup/tailwind-plugins/buttons plugin using theme options.
theme: {
extend: {
button: (theme) => {
return {
// Styles for all buttons e.g. `.btn`.
DEFAULT: {
paddingLeft: theme('padding.4'),
paddingRight: theme('padding.4'),
},
// Override or extend any themed buttons. Provide _any_ CSS property.
primary: {
color: theme('textColor.white'),
textTransform: 'uppercase',
// Change the hover and focus states
hover: {
borderColor: theme('borderColor.white'),
backgroundColor: theme('backgroundColor.white'),
color: theme('colors.white'),
},
focus: {
borderColor: theme('borderColor.white'),
backgroundColor: theme('backgroundColor.white'),
color: theme('colors.white'),
},
},
// Add new named items, like `.btn-outline`.
outline: {
backgroundColor: 'transparent',
color: theme('textColor.primary.500'),
borderColor: theme('borderColor.primary.500'),
},
// Add styles to target a breakpoint
'@screen sm': {
fontSize: theme('fontSize.xs'),
},
};
},
},
},