diff --git a/src/components.d.ts b/src/components.d.ts index 92aefed87..415d19701 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -89,6 +89,10 @@ export namespace Components { * Dropdown Button color */ "color": "primary" | "secondary" | "danger" | "link" | "text"; + /** + * Disables the dropdown button if its true + */ + "disabled": boolean; /** * Label for the dropdown button */ @@ -810,6 +814,10 @@ declare namespace LocalJSX { * Dropdown Button color */ "color"?: "primary" | "secondary" | "danger" | "link" | "text"; + /** + * Disables the dropdown button if its true + */ + "disabled"?: boolean; /** * Label for the dropdown button */ diff --git a/src/components/dropdown-button/dropdown-button.scss b/src/components/dropdown-button/dropdown-button.scss index 2e2afee81..2d201cc62 100644 --- a/src/components/dropdown-button/dropdown-button.scss +++ b/src/components/dropdown-button/dropdown-button.scss @@ -150,6 +150,11 @@ @include danger; } + &.disabled { + cursor: not-allowed; + opacity: 0.4; + } + &:focus { border: 1px solid var(--color-azure-800); box-shadow: 0 0 0 1px var(--color-azure-800); diff --git a/src/components/dropdown-button/dropdown-button.tsx b/src/components/dropdown-button/dropdown-button.tsx index 14b39bb40..675d0c853 100644 --- a/src/components/dropdown-button/dropdown-button.tsx +++ b/src/components/dropdown-button/dropdown-button.tsx @@ -23,6 +23,11 @@ export class DropdownButton { */ @Prop() split = false; + /** + * Disables the dropdown button if its true + */ + @Prop() disabled = false; + /** * Displays a searchable dropdown button */ @@ -89,7 +94,9 @@ export class DropdownButton { * Toggles dropdown b/w open and close */ private handleDropdownToggle() { - this.isDropdownOpen = !this.isDropdownOpen; + if (!this.disabled) { + this.isDropdownOpen = !this.isDropdownOpen; + } } /** @@ -221,6 +228,7 @@ export class DropdownButton { const dropdownStateClasses = ` dropdown-state ${'dropdown-state--' + this.color.toLowerCase()} + ${this.disabled ? 'disabled' : ''} `; return (this.split ?