Component primitive

Floating Actions

<brand-scroll-top> is a back-to-top button with a live scroll-progress ring, fixed to the bottom-right. <brand-call-button> is a phone CTA pill fixed to the bottom-left. Both are inert while hidden, respect reduced motion, and style themselves from semantic brand tokens.

<brand-scroll-top> + <brand-call-button>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-scroll-top> + <brand-call-button>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Live on this page

Scroll this page to reveal the back-to-top button (bottom-right). The call button (bottom-left) expands its number on hover.

Usage

import '@brandos/ui/components/brand-scroll-top';

<brand-scroll-top></brand-scroll-top>
<brand-call-button
  data-phone="(484) 935-3028"
  data-name="Your Business"
  data-expand="hover"
></brand-call-button>

data-expand: always (default, number always visible), hover (icon-only until hover or focus), never (icon-only). data-hrefoverrides the derived tel: link. brand-scroll-top accepts data-threshold (0 to 1, default 0.05) for when it appears. Offsets are themeable with--brand-scroll-top-right/bottom and --brand-call-button-left/bottom.