FMX Prototype Pipeline

Notification

Dot (sm) or count bubble (lg). high=orange fill, low=primary blue.

<Notification size="sm" priority="high" />

<Notification size="sm" priority="low" />

<Notification count={5} priority="high" />

<Notification count={12} priority="low" />

99+

<Notification count="99+" priority="high" />

<Notification count={0} priority="high" />

Props

size:"sm" | "lg"= "lg"

sm is a bare dot; lg shows the count.

priority:"high" | "low"= "high"

high=orange fill (#ca3500), low=primary blue (#1734a1).

count:number | string

Count rendered by lg badge (e.g. "5", "99+").

Tokens