Ripple

Ripple — эффект волны от точки нажатия. Компонент вешает обработчик pointerdown на свой родительский элемент, поэтому достаточно вставить <Ripple /> внутрь контейнера с position: relative и overflow: hidden — так он и работает внутри Button и ButtonIcon. Волна декоративна (aria-hidden) и кликов не перехватывает. Цвет по умолчанию берётся из CSS-переменной --ripple-color родителя с откатом на currentColor; при включённом «уменьшить движение» анимация сворачивается почти мгновенно.

Используется в: ButtonIcon, Button, Pagination

Анатомия

Родитель (position: relative, overflow: hidden)
Ripple

Примеры

Свой цвет

Проп color задаёт цвет волны напрямую — можно передать любой CSS-цвет или токен темы. Без пропа цвет наследуется из --ripple-color родителя (с откатом на currentColor).

Волна цвета primary

Длительность

Проп duration задаёт длительность анимации в миллисекундах (по умолчанию 550). Здесь волна замедлена до 1200 мс, чтобы эффект был виден дольше.

Медленная волна (1200 мс)

API

PropTypeDefault
color

Цвет волны. По умолчанию наследуется из CSS-переменной --ripple-color родителя (с откатом на currentColor).

string-
duration

Длительность анимации в миллисекундах

number550