How can I place extra buttons in the dialog footer?

[samsp-msft]

Fluent dialog seems to have a large footer area for buttons, but the FluentDialog only seems to enable 2 buttons. How can I add my own extras in there or replace the existing ones?

[vnbaaij]

Hi Sam,
At the moment, the dialog footer is restricted to 2 buttons (largely following these guidelines: https://fluent2.microsoft.design/components/web/react/dialog/usage#layout).

The behavior and text of the buttons can be changed through the PrimaryAction and SecondaryAction in the DialogParameters class. See https://www.fluentui-blazor.net/#dialogservicewithidi for an example of that.

For a future version, we are thinking about replacing the header and footer with a RenderFragment so you will have more freedom to fill in those areas.

[samsp-msft]

is there a way I can resize that to 0 via css or something? I need 3 buttons in one scenario. Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: Vincent Baaij ***@***.***> Sent: Saturday, September 9, 2023 11:03:29 PM To: microsoft/fluentui-blazor ***@***.***> Cc: Sam Spencer ***@***.***>; Author ***@***.***> Subject: Re: [microsoft/fluentui-blazor] How can I place extra buttons in the dialog footer? (Discussion #712) Hi Sam, At the moment, the dialog footer is restricted to 2 buttons (largely following these guidelines: https://fluent2.microsoft.design/components/web/react/dialog/usage#layout). The behavior and text of the buttons can be changed through the PrimaryAction and SecondaryAction in the DialogParameters class. See https://www.fluentui-blazor.net/#dialogservicewithidi for an example of that. For a future version, we are thinking about replacing the header and footer with a RenderFragment so you will have more freedom to fill in those areas. — Reply to this email directly, view it on GitHub<#712 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ANC7AWQUGLURIOQYFILZV63XZVJ3DANCNFSM6AAAAAA4REB7J4>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[dvoituron]

You can remove the footer area using styles like this one. Then add your buttons where you want them, in the body area.

.fluent-dialog-body {
    height: 100% !important;
}

.fluent-dialog-footer-normal {
    height: 0px !important;
    display: none !important;
}

[vnbaaij]

Also, if both PrimaryAction and SecondaryAction are set to null or empty, the footer will not be rendered.