Light Feature Checks CTA Block for React

Edit FORMATS at the top of the file: each entry has the label, the value used as the file extension, an icon and a size in bytes. The chip shows the size to one decimal place in megabytes, worked out from the bytes, and the first entry whose value matches the picker is the one shown; CSV is the one selected on load. The three checks are CHECKS.

No. The chip has a fixed width, so the page doesn't shift: only the file name, the icon and the size change inside it. The button fills its cell for the same reason, so "JSON", "CSV" and "PDF" fit without it growing.

The picker is a radio group with a name, "Export format", and arrow keys move between the three options. The chip is a polite live region, so a screen reader reads the new file name and size when the choice changes, and the button's label says which format it will start.

The picker holds the chosen value in state: turn the button into one that starts your export with format.value, or build a link such as /export?format=csv from it. The chip shows typical sizes and is there to set expectations; replace it with the real size once you know it.

Yes. The header, the toolbar and the checks follow the page's direction, the file name is kept in left-to-right order as file names are, and the size is wrapped so the number and its unit keep their order.

It's a link (href="#"). The button renders the link it's given with render, with nativeButton={false}.