Types and styles in Vue Button group component

11 Jun 20245 minutes to read

This section explains about different types and styles of ButtonGroup.

ButtonGroup types

Outline ButtonGroup

An Outline ButtonGroup has a border with transparent background. To create Outline ButtonGroup, e-outline class needs to be added to the target element and to the button element using cssClass property.

The following sample illustrates how to achieve outline ButtonGroup,

<template>
  <div id='app'>
    <div class="e-btn-group e-outline">
      <ejs-button cssClass='e-outline'>HTML</ejs-button>
      <ejs-button cssClass='e-outline'>CSS</ejs-button>
      <ejs-button cssClass='e-outline'>Javascript</ejs-button>
    </div>
  </div>
</template>
<script setup>
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

#app {
  margin: 20px;
}

.e-btn-group {
  margin: 25px 5px 20px 20px;
}
</style>
<template>
  <div id='app'>
    <div class="e-btn-group e-outline">
      <ejs-button cssClass='e-outline'>HTML</ejs-button>
      <ejs-button cssClass='e-outline'>CSS</ejs-button>
      <ejs-button cssClass='e-outline'>Javascript</ejs-button>
    </div>
  </div>
</template>
<script>

import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent
  },
  name: 'app'
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

#app {
  margin: 20px;
}

.e-btn-group {
  margin: 25px 5px 20px 20px;
}
</style>

ButtonGroup does not have support for flat and round types.

ButtonGroup styles

The Essential JS 2 ButtonGroup has the following predefined styles. This can be achieved by adding corresponding class name in each button elements using cssClass property.

Class Description
e-primary Used to represent a primary action.
e-success Used to represent a positive action.
e-info Used to represent an informative action.
e-warning Used to represent an action with caution.
e-danger Used to represent a negative action.

The following example illustrates how to achieve predefined styles in ButtonGroup,

<template>
  <div id='app'>
    <div class="e-btn-group">
        <ejs-button cssClass='e-info'>View</ejs-button>
        <ejs-button>Edit</ejs-button>
        <ejs-button cssClass='e-danger'>Delete</ejs-button>
    </div>
  </div>
</template>
<script setup>

import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
  #app {
   margin: 20px;
  }

  .e-btn-group {
   margin: 25px 5px 20px 20px;
  }
</style>
<template>
  <div id='app'>
    <div class="e-btn-group">
      <ejs-button cssClass='e-info'>View</ejs-button>
      <ejs-button>Edit</ejs-button>
      <ejs-button cssClass='e-danger'>Delete</ejs-button>
    </div>
  </div>
</template>
<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent
  }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

#app {
  margin: 20px;
}

.e-btn-group {
  margin: 25px 5px 20px 20px;
}
</style>

See Also