Pulse

Updated: June 30, 2026

The Pulse component is used to display a colored dot with a pulsing animation effect.

Pulse

<Pulse size="s"/>
<Pulse size="m" scheme="danger"/>
<Pulse size="l" scheme="success"/>

Color

Set the color of the pulse using the scheme prop.

Color

<Pulse scheme="brand"/>
<Pulse scheme="accent"/>
<Pulse scheme="neutral"/>
<Pulse scheme="info"/>
<Pulse scheme="warning"/>
<Pulse scheme="danger"/>
<Pulse scheme="success"/>

Size

Set the size of the pulse using the size prop.

Size

<Pulse size="s"/>
<Pulse size="m"/>
<Pulse size="l"/>

Pulse size

Customize the pulse ring dimensions with the pulseSize prop, accepting a number or string value.

Pulse size

<Pulse size="m" pulseSize={80} />
<Pulse size="m" pulseSize="4rem" />

API reference

Prop	Type	Default
scheme Colour scheme of the dot and its ring.	neutralbrandaccentinfodangerwarningsuccess	brand
size Dot size.	lms	m
pulseSize How far the ring travels.	stringnumber	—
children	React.ReactNode	—
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—

ComponentsProgressBar

ComponentsScrollContainer

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club