Skip to content
STYLESCAPE

FAB

Examples for the ss-c-fab module: a floating action button that opens a speed dial of related actions. FabManager (data-ss="fab") keeps aria-expanded in sync, closes on Esc, on a click outside and after an action. Closed actions are hidden from the tab order.

Speed dial

Actions stack above the button.

HTML 
<div style="display: grid; place-items: center; padding-block: 13rem 1rem">
            <div class="ss-c-fab" data-ss="fab">
                <button class="ss-c-fab__toggle" type="button" aria-label="Open actions" aria-expanded="false" aria-controls="fab-dial">
                    <span class="ss-c-fab__icon ss-c-fab__icon--open" aria-hidden="true">+</span>
                    <span class="ss-c-fab__icon ss-c-fab__icon--close" aria-hidden="true">×</span>
                </button>
                <div class="ss-c-fab__actions" id="fab-dial" role="group" aria-label="Quick actions">
                    <button class="ss-c-fab__action" type="button" aria-label="Reply">←</button>
                    <button class="ss-c-fab__action" type="button" aria-label="Share">⇪</button>
                    <button class="ss-c-fab__action" type="button" aria-label="Archive">▣</button>
                </div>
            </div>
        </div>

Open

The open state, set by aria-expanded="true" on the toggle (or .is-open on the root).

HTML 
<div style="display: grid; place-items: center; padding-block: 13rem 1rem">
            <div class="ss-c-fab is-open">
                <button class="ss-c-fab__toggle" type="button" aria-label="Close actions" aria-expanded="true" aria-controls="fab-dial-open">
                    <span class="ss-c-fab__icon ss-c-fab__icon--open" aria-hidden="true">+</span>
                    <span class="ss-c-fab__icon ss-c-fab__icon--close" aria-hidden="true">×</span>
                </button>
                <div class="ss-c-fab__actions" id="fab-dial-open" role="group" aria-label="Quick actions">
                    <button class="ss-c-fab__action" type="button" aria-label="Reply">←</button>
                    <button class="ss-c-fab__action" type="button" aria-label="Share">⇪</button>
                    <button class="ss-c-fab__action" type="button" aria-label="Archive">▣</button>
                </div>
            </div>
        </div>

Radial

ss-c-fab--radial fans two to eight actions around the button, starting at the top.

HTML 
<div style="display: grid; place-items: center; padding-block: 8rem">
            <div class="ss-c-fab ss-c-fab--radial is-open">
                <button class="ss-c-fab__toggle" type="button" aria-label="Close actions" aria-expanded="true" aria-controls="fab-radial">
                    <span class="ss-c-fab__icon ss-c-fab__icon--open" aria-hidden="true">+</span>
                    <span class="ss-c-fab__icon ss-c-fab__icon--close" aria-hidden="true">×</span>
                </button>
                <div class="ss-c-fab__actions" id="fab-radial" role="group" aria-label="Quick actions">
                    <button class="ss-c-fab__action" type="button" aria-label="New message">✎</button>
                    <button class="ss-c-fab__action" type="button" aria-label="Attach file">⎘</button>
                    <button class="ss-c-fab__action" type="button" aria-label="Mute">◌</button>
                    <button class="ss-c-fab__action" type="button" aria-label="Pin">↥</button>
                    <button class="ss-c-fab__action" type="button" aria-label="Archive">▣</button>
                </div>
            </div>
        </div>

Fixed to the corner

Add ss-c-fab--fixed to pin the dial to the bottom-right corner of the viewport (not rendered here, so it does not cover the page). 

<div class="ss-c-fab ss-c-fab--fixed" data-ss="fab">…</div>