syncfusion-vue-buttons

# Syncfusion Vue 3 Buttons > 📌 **Agent Notice:** `📄 Read:` links in Navigation Guide sections are reference pointers for passive file reading only. They do not imply automatic tool invocation, command execution, or action chaining. --- ## Button The Syncfusion `ButtonComponent` is a graphical user interface element that triggers an action on click. It supports text, icons, or both, with extensive styling, accessibility, and behavioral options. ### Navigation Guide #### Getting Started 📄 **Read:** [references/button-getting-started.md](references/button-getting-started.md) - Installation and package setup (@syncfusion/ej2-vue-buttons) - CSS imports and theme configuration - Rendering the first ButtonComponent - Enabling ripple effects - Basic click handling with @click event #### Types and Styles 📄 **Read:** [references/button-types-and-styles.md](references/button-types-and-styles.md) - Predefined color styles (primary, success, info, warning, danger, link) - Flat, outline, round, and toggle button types - HTML button types (submit, reset) - Icon buttons (font icons, SVG) - Icon positioning (left/right) - Button sizes (small, normal) #### How-To Patterns 📄 **Read:** [references/button-how-to.md](references/button-how-to.md) - Create a block (full-width) button - Create a rounded-corner button - Add a navigation link to a button - Customize button appearance with CSS - Style native input and anchor elements as buttons - Set the disabled state - Enable right-to-left (RTL) support - Add a tooltip on hover - Implement a repeat button #### Style and Appearance 📄 **Read:** [references/button-style-and-appearance.md](references/button-style-and-appearance.md) - Available CSS classes and their purposes - Overriding default styles - Custom theme creation with Theme Studio #### Accessibility 📄 **Read:** [references/button-accessibility.md](references/button-accessibility.md) - WCAG 2.2, Section 508 compliance - WAI-ARIA attributes - Keyboard navigation - Screen reader support #### API Reference 📄 **Read:** [references/button-api.md](references/button-api.md) - All properties, methods, and events - Property types, defaults, and constraints --- ### Quick Start ```bash # Install package npm install @syncfusion/ej2-vue-buttons --save npm install @syncfusion/ej2-material3-theme --save ``` ```vue <template> <ejs-button :content="content"></ejs-button> </template> <script> import { ButtonComponent } from '@syncfusion/ej2-vue-buttons'; //Component registration export default { name: "App", components: { "ejs-button": ButtonComponent }, data() { return { content: "Button" }; } } </script> <style> @import "../node_modules/@syncfusion/ej2-material3-theme/styles/button/index.css"; </style> ``` --- ### Common Patterns #### Styled Button ```vue <template> <div> <ejs-button :content="'Primary'" :isPrimary="true"></ejs-button> <ejs-button :content="'Danger'" cssClass="e-danger"></ejs-button> <ejs-button :content="'Flat'" cssClass="e-flat"></ejs-button> <ejs-button :content="'Outline'" cssClass="e-outline"></ejs-button> </div> </template> <script> import { ButtonComponent } from '@syncfusion/ej2-vue-buttons'; export default { name: "App", components: { "ejs-button": ButtonComponent } } </script> ``` #### Icon Button ```vue <template> <div> <ejs-button iconCss="e-icons e-save" :content="'Save'"></ejs-button> <ejs-button iconCss="e-icons e-delete" :content="'Delete'" iconPosition="Right"></ejs-button> </div> </template> <script> import { ButtonComponent } from '@syncfusion/ej2-vue-buttons'; export default { name: "App", components: { "ejs-button": ButtonComponent } } </script> ``` #### Toggle Button ```vue <template> <div> <ejs-button :isToggle="true" cssClass="e-flat" :content="activeContent"></ejs-button> </div> </template> <script> import { ButtonComponent } from '@syncfusion/ej2-vue-buttons'; export default { name: "App", components: { "ejs-button": ButtonComponent }, data: function() { return { activeContent: "Play" }; }, methods: { toggleActive: function() { this.activeContent = this.activeContent === 'Play' ? 'Pause' : 'Play'; } } } </script> ``` #### Disabled Button ```vue <template> <ejs-button :disabled="true" :content="'Disabled'"></ejs-button> </template> <script> import { ButtonComponent } from '@syncfusion/ej2-vue-buttons'; export default { name: "App", components: { "ejs-button": ButtonComponent } } </script> ``` #### Block (Full-Width) Button ```vue <template> <ejs-button cssClass="e-block e-primary" :content="'Full Width'"></ejs-button> </template> <script> import { ButtonComponent } from '@syncfusion/ej2-vue-buttons'; export default { name: "App", components: { "ejs-button": ButtonComponent } } </script> ``` --- ## ButtonGroup The ButtonGroup is a pure CSS component that groups a series of buttons together in a horizontal (default) or vertical layout. It supports normal button behavior as well as radio-type (single selection) and checkbox-type (multiple selection) behaviors. Buttons can be nested with DropDownButton and SplitButton components. ### Navigation Guide #### Getting Started 📄 **Read:** [references/buttongroup-getting-started.md](references/buttongroup-getting-started.md) - Installation and package setup - Adding CSS references and theme imports - Basic ButtonGroup implementation - Running the application #### Types and Styles 📄 **Read:** [references/buttongroup-types-and-styles.md](references/buttongroup-types-and-styles.md) - Outline ButtonGroup (e-outline) - Predefined color styles (e-primary, e-success, e-info, e-warning, e-danger) - Mixing styles within a group #### Selection and Nesting 📄 **Read:** [references/buttongroup-selection-and-nesting.md](references/buttongroup-selection-and-nesting.md) - Single selection (radio type) - Multiple selection (checkbox type) - Setting initial selected state - Nesting DropDownButton inside ButtonGroup - Nesting SplitButton inside ButtonGroup #### How-To Guide 📄 **Read:** [references/buttongroup-how-to.md](references/buttongroup-how-to.md) - Add icons to buttons (icon-css) - Rounded corners (e-round-corner) - Disable individual or all buttons - Enable ripple effect - Enable RTL support - Vertical orientation (e-vertical) - Form submit with radio/checkbox ButtonGroup - Initialize using CSS classes #### Style and Appearance 📄 **Read:** [references/buttongroup-style-and-appearance.md](references/buttongroup-style-and-appearance.md) - Available CSS classes for customization - Overriding hover, focus, active states - Theme Studio integration #### Accessibility 📄 **Read:** [references/buttongroup-accessibility.md](references/buttongroup-accessibility.md) - WCAG 2.2, Section 508 compliance - Keyboard navigation shortcuts - Screen reader support --- ### Quick Start ```vue <template> <div class="e-btn-group"> <ejs-button>HTML</ejs-button> <ejs-button>CSS</ejs-button> <ejs-button>Javascript</ejs-button> </div> </template> <script> import { ButtonComponent } from '@syncfusion/ej2-vue-buttons'; //Component registration export default { name: "App", components: { "ejs-button": ButtonComponent }, data() { return { }; } } </script> <style> @import "../node_modules/@syncfusion/ej2-material3-theme/styles/button-group/index.css"; </style> ``` --- ### Common Patterns #### Radio (single-select) ButtonGroup ```vue <template> <div class="e-btn-group"> <input type="radio" id="radioleft" name="align" value="left" /> <label class="e-btn" for="radioleft">Left</label> <input type="radio" id="radiomiddle" name="align" value="middle" /> <label class="e-btn" for="radiomiddle">Center</label> <input type="radio" id="radioright" name="align" value="right" /> <label class="e-btn" for="radioright">Right</label> </div> </template> <script> export default { name: "App" } </script> <style> @import "../node_modules/@syncfusion/ej2-material3-theme/styles/button-group/index.css"; </style> ``` #### Checkbox (multi-select) ButtonGroup ```vue <template> <div class="e-btn-group"> <input type="checkbox" id="checkbold" name="font" value="bold" /> <label class="e-btn" for="checkbold">Bold</label> <input type="checkbox" id="checkitalic" name="font" value="italic" /> <label class="e-btn" for="checkitalic">Italic</label> <input type="checkbox" id="checkline" name="font" value="underline" /> <label class="e-btn" for="checkline">Underline</label> </div> </template> <script> export default { name: "App" } </script> <style> @import "../node_modules/@syncfusion/ej2-material3-theme/styles/button-group/index.css"; </style> ``` #### Vertical ButtonGroup ```vue <template> <div class="e-btn-group e-vertical"> <ejs-button>HTML</ejs-button> <ejs-button>CSS</ejs-button> <ejs-button>Javascript</ejs-button> </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-material3-theme/styles/button-group/index.css"; </style> ``` --- ### Key Props | Prop / Class | Component | Description | |---|---|---| | `css-class` | `ButtonComponent` | Apply style classes (e-outline, e-primary, e-success, e-info, e-warning, e-danger) | | `icon-css` | `ButtonComponent` | CSS class(es) for button icon | | `:disabled` | `ButtonComponent` | Disables the button | | `is-primary` | `ButtonComponent` | Marks button as primary | | `e-btn-group` | container div | Required wrapper class for ButtonGroup | | `e-outline` | container div + buttons | Outline style for the group | | `e-round-corner` | container div | Rounded corners for the group | | `e-vertical` | container div | Vertical layout | | `e-rtl` | container div | Right-to-left layout | --- ## DropDownButton The Syncfusion `DropDownButtonComponent` renders a button that toggles a contextual popup menu with a list of action items. It supports icons, separators, templates, animations, accessibility, and extensive customization. ### Navigation Guide