Action Button

The Action Button component creates a Floating Action Button (FAB) that expands to reveal a circular, semi-circular, or custom arc of additional sub-action buttons around it. It is built to support smooth rotational transitions, custom radii, and flexible layout distributions.

Full Circle (0° - 360°)

Semi-Circle (180° - 360°)

Quarter-Arc (180° - 270°)

📷
🖼️

<!-- 1. Full Circle Action Button -->
<div data-role="action-button" data-radius="80" data-angle-start="0" data-angle-end="360">
    <button class="main-action">+</button>
    <ul class="actions">
        <li><a href="#">🏠</a></li>
        <li><a href="#">👤</a></li>
        <li><a href="#">⚙️</a></li>
        <li><a href="#">🔍</a></li>
    </ul>
</div>

<!-- 2. Semi-Circle Action Button (Arc) -->
<div data-role="action-button" data-radius="80" data-angle-start="180" data-angle-end="360">
    <button class="main-action" style="background-color: var(--success-color);">+</button>
    <ul class="actions">
        <li><a href="#">⚡</a></li>
        <li><a href="#">🔥</a></li>
        <li><a href="#">🎨</a></li>
    </ul>
</div>

Configuration Attributes

The Action Button options are customized declaratively via HTML5 data attributes:

Data Attributes

Attribute	Default	Description
data-radius	80	The expansion radius distance (in pixels) from the center main action button.
data-angle-start	0	The starting angle (in degrees) for placing the sub-actions. 0° represents right.
data-angle-end	360	The ending angle (in degrees) for placing the sub-actions.