+ This page documents patterns for button design, including types, placement, color, and size. +
++ This button has the heavist visual weight to draw users' attention. +
++ Such actions include Add and Apply. This button type works well for + multiple actions of equal weight. +
++ Close, cancel, filter, refresh, and other actions that reconfigure the + UI are appropriate for empty buttons. +
++ The icon must be immediately understood, for example, a trash can + for delete. Use these buttons sparingly, and never + for the primary action. +
++ A modal says “pay attention to me and nothing else.” Modals work best for focusing users' attention on a short + amount of content and getting them to make a decision. +
+ +Short and sentence-case, it lets the user know the task that needs to get done.
+This task should be critical to continuing the current process.
+The primary action is a filled button, and the secondary action is a link button. +
+It lets the user know that the content behind the modal isn't active.
++ Modals pull users out of their current context. + They are well-suited for asking users to confirm an action and for short, focused input. + Otherwise, it's better to show the content within the page. +
+
+ A modal should be a short, direct conversation with the user.
+ If you’re trying to stuff a lot of content into your modal, then you should probably consider
+ a different solution, such as
+ Don't just pop open a modal. Let a user action, + such as clicking a button, trigger a modal. +
++ Modal content should fit in a single screen. + If your modal has numerous options or a long list of items, use scrolling only + if it's better than other design solutions, + such as keeping the content on the page. +
+
+ Using a modal on top of a modal typically means your workflow is
+ too complex—users shouldn't have
+ to remember which modal they are in. Instead, use a component
+ that supports multiple steps,
+ such as a
Users don't expect a toolbar button to open a modal.
++ This page documents patterns for using toasts, short messages that + appears on the lower right corner and time out after a few seconds. + They are a popular design choice because they don't need to + fit in a layout and don't disrupt the user. +
++ They are the most-commonly used toasts. +
++ These toasts work well in monitoring apps when something + significant requires action. +
++ An error toast might let users know an action didn't complete or that a form has errors. +
++ The default toast, an info toast might notify users about an ongoing action. +
+