Overlays actionsoverlaymobile

Bottom Action Tray

Compact set of floating actions locked to the bottom viewport.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { BottomActionTray } from 'astro-component-kit';
---

<FloatingTrayActions>Content</FloatingTrayActions>
--- import { BottomActionTray } from 'astro-component-kit'; --- <FloatingTrayActions>Content</FloatingTrayActions>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/BottomActionTray.astro and paste the following code:

astro 
---
---
<div class="tray">
  <button class="tray-btn">✏️ Edit</button>
  <div class="sep"></div>
  <button class="tray-btn">↗️ Share</button>
</div>
<style>
  .tray { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 100px; display: flex; align-items: center; padding: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); z-index: 1000; border: 1px solid rgba(0,0,0,0.1); }
  .tray-btn { background: none; border: none; padding: 0.6rem 1.25rem; font-weight: 700; color: #000; cursor: pointer; font-size: 0.85rem; transition: 0.2s; }
  .tray-btn:hover { opacity: 0.6; }
  .sep { width: 1px; height: 20px; background: #eee; }
</style>
--- --- <div class="tray"> <button class="tray-btn">✏️ Edit</button> <div class="sep"></div> <button class="tray-btn">↗️ Share</button> </div> <style> .tray { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 100px; display: flex; align-items: center; padding: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); z-index: 1000; border: 1px solid rgba(0,0,0,0.1); } .tray-btn { background: none; border: none; padding: 0.6rem 1.25rem; font-weight: 700; color: #000; cursor: pointer; font-size: 0.85rem; transition: 0.2s; } .tray-btn:hover { opacity: 0.6; } .sep { width: 1px; height: 20px; background: #eee; } </style>

Quick Info

Category
Overlays
Filename
BottomActionTray.astro
Dependencies
None — pure Astro + CSS
Tags
actionsoverlaymobile