Action Sheet Modal

An action sheet modal built with pure HTML and CSS that displays a set of related actions in a bottom aligned panel, providing clear decision options without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where multiple related actions need to be presented clearly, such as mobile-style menus, confirmation choices, contextual action lists, or secondary navigation controls.

Implementation

The action sheet is implemented using CSS positioning, transitions, and overlay styling, allowing the panel to slide into view smoothly while keeping the component lightweight and easy to integrate.

HTML

<div class="modal-sheet">
  <button>Rename</button>
  <button>Archive</button>
</div>

<div class="modal-sheet">
  <button>Rename</button>
  <button>Archive</button>
</div>

CSS

.modal-sheet {
  width: 200px;
  padding: 0.6rem;
  border-radius: 18px;
  background: #f9fafb;
  display: grid;
  gap: 0.35rem;
}

.modal-sheet button {
  padding: 0.45rem;
  border-radius: 12px;
  border: none;
  background: #ffffff;
  font-size: 12px;
  text-align: left;
  transition: background 150ms ease;
}

.modal-sheet button:hover {
  background: #eef2ff;
}

@media (prefers-color-scheme: dark) {
  .modal-sheet {
    background: #020617;
  }

  .modal-sheet button {
    background: #020617;
    color: #e5e7eb;
  }

  .modal-sheet button:hover {
    background: #1e1b4b;
  }
}

.modal-sheet {
  width: 200px;
  padding: 0.6rem;
  border-radius: 18px;
  background: #f9fafb;
  display: grid;
  gap: 0.35rem;
}

.modal-sheet button {
  padding: 0.45rem;
  border-radius: 12px;
  border: none;
  background: #ffffff;
  font-size: 12px;
  text-align: left;
  transition: background 150ms ease;
}

.modal-sheet button:hover {
  background: #eef2ff;
}

@media (prefers-color-scheme: dark) {
  .modal-sheet {
    background: #020617;
  }

  .modal-sheet button {
    background: #020617;
    color: #e5e7eb;
  }

  .modal-sheet button:hover {
    background: #1e1b4b;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses a bottom aligned modal layout
• Groups related actions for clarity
• Smooth reveal and dismissal animation
• Works in modern browsers

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.