diff --git a/libs/components/src/button/button.directive.ts b/libs/components/src/button/button.directive.ts index 827c49c22dbc..d5bf9df52c9e 100644 --- a/libs/components/src/button/button.directive.ts +++ b/libs/components/src/button/button.directive.ts @@ -60,13 +60,12 @@ export class ButtonDirective { "focus:tw-ring-primary-700", "focus:tw-z-10", ] - .concat(this.block ? ["tw-w-full", "tw-block"] : ["tw-inline-block"]) + .concat( + this.block == null || this.block === false ? ["tw-inline-block"] : ["tw-w-full", "tw-block"] + ) .concat(buttonStyles[this.buttonType ?? "secondary"]); } - @Input() - buttonType: ButtonTypes = null; - - @Input() - block = false; + @Input() buttonType: ButtonTypes = null; + @Input() block?: boolean; } diff --git a/libs/components/src/button/button.stories.ts b/libs/components/src/button/button.stories.ts index 35a7dbfe8296..f09b8701b1be 100644 --- a/libs/components/src/button/button.stories.ts +++ b/libs/components/src/button/button.stories.ts @@ -52,3 +52,21 @@ export const Disabled = DisabledTemplate.bind({}); Disabled.args = { size: "small", }; + +const BlockTemplate: Story = (args: ButtonDirective) => ({ + props: args, + template: ` + + + [block]="true" Link + + + block Link + + `, +}); + +export const Block = BlockTemplate.bind({}); +Block.args = { + block: true, +}; diff --git a/libs/components/src/submit-button/submit-button.component.html b/libs/components/src/submit-button/submit-button.component.html index f3c097b2f342..9d9657ba7ee6 100644 --- a/libs/components/src/submit-button/submit-button.component.html +++ b/libs/components/src/submit-button/submit-button.component.html @@ -1,4 +1,10 @@ -