Badge Button

Badge Button represents an entry point to a platform-powered flow (e.g., identity, payments). It should be used when the user is taken into, or interacts with, a trusted government platform to complete the task. The badge identifies the platform to ensure consistency, transparency, and recognition.

Implementation guidance

See Layouts & patterns to see where and how to use the Badge Button.

Figma link - Layout and patterns

Types

mpay
mpass
msign
mpower
mdelivery

Style

primary

primary mpay
primary mpass
primary msign
primary mpower
primary mdelivery

neutral

neutral mpay
neutral mpass
neutral msign
neutral mpower
neutral mdelivery

States

primary

defaultmpay
hovermpass
activemsign
focusmpower
loadingmdelivery
disabledmpay

neutral

defaultmpay
hovermpass
activemsign
focusmpower
loadingmdelivery
disabledmpay