Tailwind CSS Button Group with Angular

Use our ButtonGroup based on Tailwind CSS for actions.

ButtonGroup is an essential element of web design. Basically, ButtonGroup is stack of buttons. They help users navigate our websites or apps and drive them to a particular action.

See below our ButtonGroup example that you can use in your Tailwind CSS and Angular project. The example also comes in different styles and colors, so you can adapt it easily to your needs.

You first need to import the DUIButtonGroup Module into your application module 

    
 import { DUIButton } from "david-ui-angular";
 
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, DUIButton],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule {}
    
 <!-- Use DUI Button Group in html file -->
  <dui-button-group color="gray">
    <dui-button>One</dui-button>
    <dui-button>Two</dui-button>
    <dui-button>Three</dui-button>
  </dui-button-group>

Button Group Variants

The ButtonGroup component comes with 4 different variants that you can change it using the variant prop. 

    
<!-- Use DUI Button Group in html file -->
  <div class="flex w-max flex-col gap-3">
    <dui-button-group color="gray">
      <dui-button>One</dui-button>
      <dui-button>Two</dui-button>
      <dui-button>Three</dui-button>
    </dui-button-group>
    <dui-button-group variant="gradient" color="gray">
      <dui-button>One</dui-button>
      <dui-button>Two</dui-button>
      <dui-button>Three</dui-button>
    </dui-button-group>
    <dui-button-group variant="outlined" color="gray">
      <dui-button>One</dui-button>
      <dui-button>Two</dui-button>
      <dui-button>Three</dui-button>
    </dui-button-group>
    <dui-button-group variant="text" color="gray">
      <dui-button>One</dui-button>
      <dui-button>Two</dui-button>
      <dui-button>Three</dui-button>
    </dui-button-group>
 
  </div>

Button Group Size

The ButtonGroup component comes with 3 different sizes that you can change it using the size prop. 

    
 <!-- Use DUI Button Group in html file -->
  <div class="flex w-max flex-col gap-3">
    <dui-button-group size="sm" color="gray">
      <dui-button>One</dui-button>
      <dui-button>Two</dui-button>
      <dui-button>Three</dui-button>
    </dui-button-group>
    <dui-button-group size="md" color="gray">
        <dui-button>One</dui-button>
        <dui-button>Two</dui-button>
        <dui-button>Three</dui-button>
      </dui-button-group>
      <dui-button-group size="lg" color="gray">
        <dui-button>One</dui-button>
        <dui-button>Two</dui-button>
        <dui-button>Three</dui-button>
      </dui-button-group>
      
  </div>

Button Group Colors

The ButtonGroup component comes with 19 different colors that you can change it using the color prop. 

    
 <!-- Use DUI Button Group in html file -->
  <dui-button size="md" color="gray">Button</dui-button>
  <dui-button size="md" color="blue">Button</dui-button>
  <dui-button size="md" color="red">Button</dui-button>
  <dui-button size="md" color="green">Button</dui-button>

Block Level Button Group

A Button Group could be a block-level component as well that gets all the available space in a row. You can render a Button Group as a block-level element using the fullWidhh prop. 

    
 <!-- Use DUI Button Group in html file -->
  <div class="w-full">
    <dui-button-group color="gray" [fullWidth]="true" >
      <dui-button class="w-full" >One</dui-button>
      <dui-button class="w-full">Two</dui-button>
      <dui-button class="w-full">Three</dui-button>
    </dui-button-group>
  </div>

Button Group Ripple Effect

You can turn on/off the ripple effect for the ButtonGroup Component using ripple attribute. 

    
 
  <div class="flex w-max flex-col gap-3">
      <dui-button-group color="gray" [ripple]="true">
        <dui-button>One</dui-button>
        <dui-button>Two</dui-button>
        <dui-button>Three</dui-button>
      </dui-button-group>
      <dui-button-group color="gray" [ripple]="false">
        <dui-button>One</dui-button>
        <dui-button>Two</dui-button>
        <dui-button>Three</dui-button>
      </dui-button-group>
  </div>

Button Group Properties

The following properties are available for dui-button-group component. These are the custom properties that we've added for the button group component and you can use all the other native properties as well.

AttributeType Description Default
variantVariantchange button group variantfilled
colorColorchange button group colorgray
classNamestringAdd custom className for button group''
sizebooleanChange button group sizemd
fullWidthbooleanBlock level button groupfalse
roundedbooleanRounded button groupfalse
ripplebooleanToggle ripple effect in button grouptrue

Type - Variant 

    
 
  type variant = 'filled' | 'outlined' | 'gradient' | 'text';

Type - Size 

    
 
  type size = 'sm' | 'md' | 'lg';

Type - Color 

    
 type colors =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";