diff --git a/docs/examples/test.vue b/docs/examples/test.vue
index 3603b40..02787b4 100644
--- a/docs/examples/test.vue
+++ b/docs/examples/test.vue
@@ -1,5 +1,26 @@
 <template>
 
+    <example-container class="slds-m-bottom_medium">
+        <slds-button-group :dropdown-options="dropdownOptions">
+            <slds-button
+                label="foo"
+                neutral
+            />
+        </slds-button-group>
+    </example-container>
+
+    <example-container class="slds-m-bottom_medium">
+        <slds-menu
+            :options="dropdownOptions"
+        />
+    </example-container>
+
+    <example-container class="slds-m-bottom_medium">
+        <span class="slds-icon_container slds-icon-utility-add slds-current-color" @click="foo">
+            <slds-svg class="slds-icon slds-icon_x-small slds-cursor_not-allowed" icon="utility:add"/>
+        </span>
+    </example-container>
+
     <!-- Datepicker -->
     <example-container class="slds-m-bottom_medium">
         <slds-datepicker
@@ -430,8 +451,7 @@ import SldsMenu from "../../src/components/slds-menu/slds-menu.vue"
 import SldsCheckboxButtonGroup from "../../src/components/slds-checkbox-button-group/slds-checkbox-button-group.vue"
 import SldsVerticalNavigation from "../../src/components/slds-vertical-navigation/slds-vertical-navigation.vue"
 import SldsVerticalNavigationItem from "../../src/components/slds-vertical-navigation/slds-vertical-navigation-item.vue"
-import SldsVerticalNavigationSection
-    from "../../src/components/slds-vertical-navigation/slds-vertical-navigation-section.vue"
+import SldsVerticalNavigationSection from "../../src/components/slds-vertical-navigation/slds-vertical-navigation-section.vue"
 import SldsTabs from "../../src/components/slds-tabs/slds-tabs.vue"
 import SldsPanel from "../../src/components/slds-panel/slds-panel.vue"
 import SldsScopedTabs from "../../src/components/slds-scoped-tabs/slds-scoped-tabs.vue"
@@ -448,12 +468,16 @@ import SldsColumn from "../../src/components/slds-grid/slds-column.vue"
 import SldsInput from "../../src/components/slds-input/slds-input.vue"
 import SldsCheckboxGroup from "../../src/components/slds-checkbox-group/slds-checkbox-group.vue"
 import SldsCheckboxOutputGroup from "../../src/components/slds-checkbox-output-group/slds-checkbox-output-group.vue"
+import SldsSvg from "../../src/components/slds-svg/slds-svg.vue"
+import SldsButtonGroup from "../../src/components/slds-button-group/slds-button-group.vue"
 import SldsDatepicker from "../../src/components/slds-datepicker/slds-datepicker.vue"
 
 export default {
     name: "test",
 
     components: {
+        SldsButtonGroup,
+        SldsSvg,
         SldsDatepicker,
         SldsCheckboxOutputGroup,
         SldsCheckboxGroup,
@@ -490,6 +514,17 @@ export default {
 
             activeTab: "details",
 
+            dropdownOptions: [
+                {
+                    label: "Cancel",
+                    value: "cancel",
+                },
+                {
+                    label: "Delete",
+                    value: "delete",
+                },
+            ],
+
             activeScopedTab: "first",
 
             checkboxButtonOptions: [
diff --git a/src/components/index.ts b/src/components/index.ts
index 9bf43c3..f0a16bf 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -60,6 +60,7 @@ export { default as SldsScopedNotification } from "./slds-scoped-notification/sl
 export { default as SldsScopedTabs } from "./slds-scoped-tabs/slds-scoped-tabs.vue"
 export { default as SldsSpinner } from "./slds-spinner/slds-spinner.vue"
 export { default as SldsSpinnerContainer } from "./slds-spinner/slds-spinner-container.vue"
+export { default as SldsSvg } from "./slds-svg/slds-svg.vue"
 export { default as SldsTab } from "./slds-tabs/slds-tab.vue"
 export { default as SldsTabContent } from "./slds-tabs/slds-tab-content.vue"
 export { default as SldsTabs } from "./slds-tabs/slds-tabs.vue"
diff --git a/src/components/slds-button-group/slds-button-group-dropdown.vue b/src/components/slds-button-group/slds-button-group-dropdown.vue
new file mode 100644
index 0000000..2b32759
--- /dev/null
+++ b/src/components/slds-button-group/slds-button-group-dropdown.vue
@@ -0,0 +1,55 @@
+<template>
+    <transition name="dropdown-right">
+        <div v-if="isOpen" class="slds-dropdown slds-dropdown_right slds-dropdown_actions">
+            <ul class="slds-dropdown__list" role="menu">
+                <li
+                    v-for="(option, index) in dropdownOptions"
+                    :key="index"
+                    class="slds-dropdown__item"
+                    role="presentation"
+                    @click="handleClickOption(option)"
+                >
+                    <a role="menuitem" tabindex="0">
+                        <span class="slds-truncate">
+                            {{ option.label }}
+                        </span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+import { DropdownOption } from "../slds-dropdown/dropdown-option"
+import { EVENTS } from "../../constants"
+
+export default defineComponent({
+    name: "SldsButtonGroupDropdown",
+
+    props: {
+        /**
+         * Dropdown options.
+         */
+        dropdownOptions: { type: Array as PropType<DropdownOption[]>, default: () => [] as DropdownOption[] },
+
+        /**
+         * Indicates whether the dropdown is open.
+         */
+        isOpen: { type: Boolean, required: true },
+    },
+
+    methods: {
+        /**
+         * Handles the click event on the option.
+         * @param option Clicked option.
+         */
+        handleClickOption(option: DropdownOption): void {
+            if (option.isDivider || option.isHeading) return
+            this.$emit(EVENTS.CLICK_OPTION, option)
+        },
+    },
+})
+</script>
+
diff --git a/src/components/slds-button-group/slds-button-group.vue b/src/components/slds-button-group/slds-button-group.vue
index edf9485..c03ec41 100644
--- a/src/components/slds-button-group/slds-button-group.vue
+++ b/src/components/slds-button-group/slds-button-group.vue
@@ -1,13 +1,119 @@
 <template>
     <div class="slds-button-group" role="group">
+
         <slot/>
+
+        <div
+            v-if="showDropdownButton"
+            v-click-outside="handleClickOutside"
+            class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open slds-button_last"
+        >
+
+            <slds-button-icon
+                bordered
+                :disabled="disabled"
+                icon-name="utility:down"
+                @click="handleClickButton"
+            />
+
+            <slds-button-group-dropdown
+                :is-open="isOpen"
+                :dropdown-options="dropdownOptions"
+                @click-option="handleClickOption"
+            />
+
+        </div>
+
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue"
+import { defineComponent, PropType } from "vue"
+import SldsButtonIcon from "../slds-button-icon/slds-button-icon.vue"
+import SldsButtonGroupDropdown from "./slds-button-group-dropdown.vue"
+import { vOnClickOutside } from "@vueuse/components"
+import { DropdownOption } from "../slds-dropdown/dropdown-option.ts"
 
 export default defineComponent({
     name: "SldsButtonGroup",
+
+    components: { SldsButtonGroupDropdown, SldsButtonIcon },
+
+    directives: {
+        ClickOutside: vOnClickOutside,
+    },
+
+    props: {
+        /**
+         * Indicates whether this component is disabled.
+         */
+        disabled: Boolean,
+
+        /**
+         * Dropdown options.
+         */
+        dropdownOptions: { type: Array as PropType<DropdownOption[]>, default: () => [] as DropdownOption[] },
+    },
+
+    data() {
+        return {
+            /**
+             * Indicates whether the dropdown is open.
+             */
+            isOpen: false,
+        }
+    },
+
+    computed: {
+        /**
+         * Indicates whether the dropdown button is visible.
+         */
+        showDropdownButton(): boolean {
+            return Boolean(this.dropdownOptions && this.dropdownOptions.length > 0)
+        },
+    },
+
+    methods: {
+        /**
+         * Handles the click event on the button.
+         */
+        handleClickButton(): void {
+            if (this.isOpen) this.hideDropdown()
+            else if (!this.disabled) this.showDropdown()
+        },
+
+        /**
+         * Handles the click event on an option.
+         * @param option The clicked option.
+         */
+        handleClickOption(option: DropdownOption): void {
+            if (this.disabled || option.disabled) return
+
+            this.$emit(option.value!)
+            this.hideDropdown()
+        },
+
+        /**
+         * Handles the click event outside this component.
+         */
+        handleClickOutside(): void {
+            this.hideDropdown()
+        },
+
+        /**
+         * Hides the dropdown.
+         */
+        hideDropdown(): void {
+            this.isOpen = false
+        },
+
+        /**
+         * Shows the dropdown.
+         */
+        showDropdown(): void {
+            this.isOpen = true
+        },
+    },
 })
 </script>
+
diff --git a/src/components/slds-modal/slds-modal.vue b/src/components/slds-modal/slds-modal.vue
index b2e32d2..8452f54 100644
--- a/src/components/slds-modal/slds-modal.vue
+++ b/src/components/slds-modal/slds-modal.vue
@@ -8,7 +8,7 @@
 
         <!-- Modal -->
         <transition appear :name="transitionName">
-            <section tabindex="-1" :class="modalClassNames">
+            <section tabindex="-1" :class="modalClassNames" v-bind="modalAttributes">
                 <div class="slds-modal__container">
 
                     <!-- Header -->
@@ -84,10 +84,18 @@ export default defineComponent({
 
     computed: {
         /**
-         * Transition name, if any.
+         * Bindable modal attributes.
          */
-        transitionName(): string {
-            return this.noAnimation ? "" : "blow-up"
+        modalAttributes(): Record<string, unknown> {
+            const attributes: Record<string, unknown> = {}
+
+            for (const attribute in this.$attrs) {
+                if (attribute.startsWith("data-") || attribute === "class") {
+                    attributes[attribute] = this.$attrs[attribute]
+                }
+            }
+
+            return attributes
         },
 
         /**
@@ -139,6 +147,13 @@ export default defineComponent({
 
             return classNames
         },
+
+        /**
+         * Transition name, if any.
+         */
+        transitionName(): string {
+            return this.noAnimation ? "" : "blow-up"
+        },
     },
 
     mounted() {