Modal

Modals are intended to be small, focused containers. They are used to display content that requires user attention without navigating away from the current page. Modals are typically used for tasks such as confirming actions, collecting user input, or displaying important information.

Keep in mind:

• Try to avoid placing large amounts of content inside a modal. For more complex or extensive information, consider using a full page instead. For example, if a modal contains a table with pagination, it likely requires more space than a modal can comfortably provide. This type of content is better suited to a dedicated page.

• Try to avoid scrolling within them whenever possible. While a modal can contain various types of content, it's best to keep it clean, concise, and easy to scan to prevent overwhelming users in a limited space.

Modal: Button hierarchy

Use as few buttons as possible, only include those that are necessary. Make sure button labels explicitly describe what will happen when the user clicks them. Button should be placed in the footer area of the modal. Gap between buttons should be 12px.

Left side

Maximum of two buttons:

• Delete actions: Basic (Alert). Usually for destructive actions like delete or remove.
• Other actions: Basic (Theme). Other actions such as download, edit, or upload.

The delete button should always be placed on the left side of other buttons.

Note: A delete button should normally require a confirmation step (for example, "Are you sure?") rather than performing the action immediately. However, if the modal's sole purpose is to confirm a delete action and the delete button is clearly styled as a primary/destructive action, an additional confirmation may not be necessary - in these cases the delete button should be placed on the right side as a primary button.

Right side

Maximum of two buttons:

• Primary button: Filled (Theme/Alert).
• Secondary button: Flat (Neutral). Usally for canceling or closing the modal.

The primary action button should always be placed on the right side of other buttons. Primary button should be inactive until all required fields are filled out or necessary actions are taken.

Example: Modal with buttons

Here is an example of a modal with buttons and how they are placed:

Icon in buttons

Icons are not always necessary when text and color already communicate the action effectively. Use icons selectively, based on the context and user needs. When included thoughtfully, icons can enhance clarity and support accessibility. Cancel and close buttons typically do not require icons. For more information about buttons, see the Button documentation.

Here are some of the most common icons used in buttons within modals:

Name	Icon	Action
Trash		Delete/remove actions
Save		Save/Update actions
PaperPlane		Send request
Pen		Edit actions
Undo		Clear/Reset changes
ArrowUpToLine		Uploading image/files
ArrowDownToLine		Downloading image/files

To read more about Icons, see the Icon documentation.

Modal: Content

Forms

Modals are often used to collect user input. This can include fields such as Inputs and TextArea. The modal might display a form that users fill out, and upon completion, they can either save the data or submit it for further processing.

Modals can also be used to present a list of options from which the user can select. This is often seen in cases like changing settings or selecting items from a list. Bifrost has components such as Select and Checkbox button that are good components for these use cases.

Action requiring confirmation

Modals are commonly used to confirm important actions, especially those that cannot be undone, such as deleting items or making irreversible changes. These modals usually ask for confirmation with buttons like Confirm or Delete. After the confirmation it should indicate that the action is done, either by: showing a loading state inside the button and the modals closes, or a text saying the action is completed.

Note: The button that triggers the "Action Requiring Confirmation" modal should not use the filled variant. The filled button variant should be reserved for the actual action performed within the modal. Buttons outside the modal should use the basic or flat button variants instead.

Information or feedback

Some modals are used to display information without requiring any user input. These might be triggered by clicking a button, and the information within the modal is often related to context or alerts the user to something important. It can also be used to indicate that an action is in progress, such as during loading or spinner states.

Modal: Interactive demo

Here is an interactive demo where you can explore different modal types and their behaviors;

Best practices

• You can place almost any type of content inside a modal, but always consider whether a modal is the best way to present that content.
• Width of the modal should be appropriate for the content it contains. Avoid making it too wide or too narrow. Within your service, ensure that modal widths are consistent to maintain a cohesive user experience.
• Always provide a clear way to close the modal, such as a close button or clicking outside the modal area.

Drawer

Drawers are ideal for displaying supplementary content without navigating away from the current page. They slide in from the side of the screen and can be dismissed easily. Drawers are used for tasks such as presenting additional options or settings, or displaying detailed information that complements the main content.

• In a drawer its more appropriate to have scrollable content compared to modals, since they often contain more extensive information, but try to keep the content concise and focused to avoid overwhelming users.
• A drawer comes with a fixed width (550px on desktop, full width on mobile). Ensure that the content fits well within this width.
• Same rules for the drawers that has position: bottom, but keep in mind that the height will vary based on content.

Drawer: Button hierarchy

The button hierarchy in drawers is similar to that of modals, with some differences in placement:

• Drawer buttons are positioned on opposite sides (e.g., primary action on the right, secondary on the left).
• Modal buttons are placed next to each other.

This is when only two actions are present. When more than two buttons (maximum of four buttons in total) have two on each side. If so, follow the same hierarchy as modals.

Example: Drawer with buttons

Here is an example of a drawer with buttons and how they are placed:

Drawer: Content

Summaries

Use drawers to present summaries that give users quick context without pulling them away from their current task.

• Key details or metadata
• Read-only information

Limit actions to lightweight interactions, such as adding or removing items. Send request.

Filter

Drawers are well-suited for filters that help users refine content while keeping results visible in the background.

• Search and list filtering
• Advanced or secondary filter options

Apply changes immediately when appropriate (use the Switch component). Otherwise, provide a clear and explicit Apply action.

Actions requiring confirmation

Drawers can include actions that require confirmation, such as deleting or resetting data. In these cases:

• The drawer initiates the action
• A confirmation modal appears to confirm or cancel the action, on the left side of the drawer. This pattern ensures destructive or critical actions remain deliberate, while still benefiting from the non-intrusive nature of drawers.

Drawer: Example

Here is an example of a drawer used for filtering content. Try to reset to se an example of an action requiring confirmation:

How Drawers handle the chat bubble

When a drawer is open, the chat bubble will keep their position to ensure they remain visible and accessible to the user. Drawers buttons will not overlap or cover the chat bubbles, instead the drawers buttons will adjust their position more to the left. This design choice enhances usability by maintaining access to chat functionality even when a drawer is active.