-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enable single visible button on Modal component #5345
Comments
I want to make a note that in smaller aspect ratio's our modal takes 100% width of screen fully covering the page behind. An acknowledgment of some one-off process when viewed in a floating container above a blurred version of whatever thing they were doing before we stole their focus could be perceived differently by the user as a full page suddenly demanding confirmation with their previous screen (task, state etc) hidden -- effectively gone. If I'm in the middle of configuring some applications settings and midway through I'm suddenly interrupted by a full screen modal with a single option opaquely asking me to "Continue" this could be frustrating or confusing. Good guidance and documentation around properly labeling of modal buttons can help here. 👍 "Return to your configuration" or "Great! Take me back to my options" might be cool. |
We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions. |
As there's been no activity since this issue was marked as stale, we are auto-closing it. |
We have seen some description about Single Button Model window. Can anyone confirm whether this is available, and how to achieve this? Note: We are using below versions Here is the doc url - https://www.carbondesignsystem.com/components/modal/usage/ |
I don't believe this has been implemented yet |
it seems we currently support 1 button modal but the button width is the full modal width (ref #2325 (comment)) but the guidance on the website (screenshot above) states that the button should be half of the modal width @asudoh |
Yes, The modal supports single button implementation, but its width is 100%. And we are trying to avoid writing any css fix/hack for this. Any help/advise is appreciated! |
Thank you for clarifying @emyarod - The website content you referred to contradicts with our designer's thought, and thus I think our website should be updated. |
Use this template if you want to request a new feature, or a change to an
existing feature.
If you are reporting a bug or problem, please use the bug template instead.
Summary
Add capability to the Modal component where a single clickable button is shown.
Asking for design and development.
Justification
There are many use cases where a modal needs to be shown and there is only one action: acknowledge the modal. This should be done with a single clickable button. Using the X to terminate the modal is not preferred. It's use is not obvious, may be overlooked by the user, does not clearly communicate the action to be taken, infers cancelation rather than acknowledgement, and in some cases is not a familiar path to the user.
For example:
Job completed
Your job has completed.
[OK]
Example:
In such a case, a button such as OK is superior for the user and preferred by UX designers.
Consider the uploaded video of a modal displaying a progress component. When the progress is complete, the interaction needs a button of some sort to acknowledge completion.
Progress.mov.zip
Desired UX and success metrics
The full user experience is a modal is displayed and has one major button in the button area which has text and click action.
"Must have" functionality
Must haves:
Property which somehow shows only one button. The button has text and a callback.
It might be done by totally hiding (not just graying) the secondary button.
Specific timeline issues / requests
This is an issue we are currently working around by adding our own button in the body and changing CSS. We will utilize at any availability.
Available extra resources
Skills are nascent on our team. For this work we would need more help than it's worth.
The text was updated successfully, but these errors were encountered: