Icon Medallion CTA Block for React

It's a controlled switch named "Two-factor authentication": its state, on, drives the medallion, the helper text and the button label, so the whole card shows one source of truth. Here it only changes this card. To wire it up, call your API from the toggle handler: turn it on once your server confirms, and set the state back if the request fails, so the card never claims protection the account doesn't have.

The icons swap with a short scale and fade, and the ring and fill change with a colour transition; with reduced motion on, both are instant. The medallion is decoration, so it's hidden from assistive technology; instead, a polite status line, empty until someone acts, says "Two-factor authentication is on" or "off", and "We'll remind you later" for the reminder. Nothing is announced when the page loads.

No. The helper text beside the switch and the button's label are each rendered in both versions in one grid cell, and the one that isn't current is invisible, so the cell has the width of the longer text and nothing around it moves when the state changes. The hidden text is out of the accessibility tree, so a screen reader reads only the current one.

It's a toggle button with aria-pressed: pressing it sets reminded and shows a check beside its label, and pressing it again clears it. Connect it to however you postpone prompts, for example a cookie or a field on the user's profile. It's disabled once two-factor is on, since there's nothing left to postpone.

The Shine Button is a link, to your setup flow when the switch is off and your security settings when it's on: change its href with the state if they differ. A band of light sweeps across it once on hover and keyboard focus, and with reduced motion it fades in where it stands. The button renders the link it's given with render, with nativeButton={false}.

Yes. The two columns swap sides with the page direction, and in the panel the medallion sits at the start and the switch at the end. The medallion and the shield icons are symmetric, so they need no change.