diff --git a/libs/components/src/button/button.directive.ts b/libs/components/src/button/button.directive.ts index 59e7b4269f7..5c4b0039aef 100644 --- a/libs/components/src/button/button.directive.ts +++ b/libs/components/src/button/button.directive.ts @@ -59,13 +59,12 @@ export class ButtonDirective { "focus-visible:tw-ring-primary-700", "focus-visible: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 35a7dbfe829..f09b8701b1b 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 f3c097b2f34..9d9657ba7ee 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 @@ -