Notify toggle

A pill toggle: pressing it rings the bell, crossfades the label and floods the pill with color.

enhancer
toggle
button
bell
notification
pressed
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Notify toggle example

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<button type="button" data-motion="notify-toggle" aria-pressed="false">Notify me</button>

import { NotifyToggle } from "./motion/react/NotifyToggle";

<NotifyToggle>Your content</NotifyToggle>

<script setup lang="ts">
import NotifyToggle from "./motion/vue/NotifyToggle.vue";
</script>

<template>
  <NotifyToggle>Your content</NotifyToggle>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "notify-toggle";

The wrappers: NotifyToggle.tsx (React, TypeScript) and NotifyToggle.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-on`	`Notifying`	the label while it is on

- It is a toggle button: aria-pressed says on or off, and its name stays the one in the page ("Notify me"), so a screen reader reads "Notify me, toggle button, pressed". The second label is decoration: both labels stack in one place, so the pill never changes size. - Enter and Space press it, like any button. - Reduced motion floods and swaps the label at once and keeps the bell still. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.

Size

notify-toggle.js is 1.1 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.