Button Group
Button groups are an easy way to group a series of buttons together. Check out code for detail of usage.
<div class="flex -space-x-px">
<button
class="btn rounded-r-none bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
1
</button>
<button
class="btn rounded-none bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
2
</button>
<button
class="btn rounded-none bg-primary-focus font-medium text-white active:bg-primary-focus/90 dark:bg-accent-focus dark:active:bg-accent/90"
>
3
</button>
<button
class="btn rounded-none bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
4
</button>
<button
class="btn rounded-l-none bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
5
</button>
</div>
<div class="flex -space-x-px">
<button
class="btn rounded-r-none rounded-l-full bg-secondary font-medium text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
>
First
</button>
<button
class="btn rounded-none bg-secondary-focus font-medium text-white active:bg-secondary-focus/90"
>
Second
</button>
<button
class="btn rounded-l-none rounded-r-full bg-secondary font-medium text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
>
Third
</button>
</div>
Outlined
Buttons groups can be outlied. Check out code for detail of usage.
<div class="flex -space-x-px">
<button
class="btn rounded-r-none border border-info font-medium text-info hover:bg-info hover:text-white focus:bg-info focus:text-white active:bg-info/90"
>
1
</button>
<button
class="btn rounded-none border border-info font-medium text-info hover:bg-info hover:text-white focus:bg-info focus:text-white active:bg-info/90"
>
2
</button>
<button
class="btn rounded-none bg-info font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
>
3
</button>
<button
class="btn rounded-none border border-info font-medium text-info hover:bg-info hover:text-white focus:bg-info focus:text-white active:bg-info/90"
>
4
</button>
<button
class="btn rounded-l-none border border-info font-medium text-info hover:bg-info hover:text-white focus:bg-info focus:text-white active:bg-info/90"
>
5
</button>
</div>
<div class="flex -space-x-px">
<button
class="btn rounded-l-full rounded-r-none border border-warning font-medium text-warning hover:bg-warning hover:text-white focus:bg-warning focus:text-white active:bg-warning/90"
>
First
</button>
<button
class="btn rounded-none bg-warning font-medium text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90"
>
Second
</button>
<button
class="btn rounded-l-none rounded-r-full border border-warning font-medium text-warning hover:bg-warning hover:text-white focus:bg-warning focus:text-white active:bg-warning/90"
>
Third
</button>
</div>
Soft Button Group
Buttons groups can have a soft colors. To do this, you should use some opacity. Check out code for detail of usage.
<div class="flex -space-x-px">
<button
class="btn rounded-r-none bg-success/10 font-medium text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
1
</button>
<button
class="btn rounded-none bg-success/10 font-medium text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
2
</button>
<button
class="btn rounded-none bg-success font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
>
3
</button>
<button
class="btn rounded-none bg-success/10 font-medium text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
4
</button>
<button
class="btn rounded-l-none bg-success/10 font-medium text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25"
>
5
</button>
</div>
<div class="flex -space-x-px">
<button
class="btn rounded-r-none rounded-l-full bg-error/10 font-medium text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25"
>
First
</button>
<button
class="btn rounded-none bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
>
Second
</button>
<button
class="btn rounded-l-none rounded-r-full bg-error/10 font-medium text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25"
>
Third
</button>
</div>