AWS Detail Integration Block for React

The block names AWS in text, the way any integration page says what it works with ("Meterfern for AWS", "Connect AWS"), and ships no AWS logo, colour or wordmark. AWS's tile is a neutral lettermark, Aw in a muted square, sitting in an icon slot that a code comment marks: drop in the official logo only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. The pair is hidden from assistive technology because the heading already names both products.

Both buttons are links (href="#"). Point Connect AWS at the screen where a customer starts the connection (for example the setup flow that builds the role command) and View docs at your guide. Nothing connects, signs in or sends anything from the block itself. Connect AWS is a Shine Button, the block's one primary action; View docs is an outline button. Both buttons render the link they're given with render, with nativeButton={false}.

A tool that assumes an IAM role asks AWS for temporary credentials each time, so there is no long-lived access key to store or leak, and the customer can remove the role to cut access at any moment. The block draws that with the sts:AssumeRole call on the wire. Edit CHAIN to change what each cell says and ROLE for the role's name.

Edit PERMISSIONS at the top of the file. Each entry is an IAM action (shown in code, left to right in any layout), its access (here all READ, an icon and a word, never a colour) and a short purpose. List exactly the actions your policy allows so the page and the policy agree; the "5 read, 0 write" count is worked out from the same list. The Cost Explorer price in the first reason is AWS's per-request charge for the API, so check it against AWS's current pricing page before you ship.

The last update is a fixed day, UPDATED = "2026-10-07", never computed from today. A small helper spells it out the same way on the server and in every browser, and the time element keeps the machine-readable day. The other facts are a typed list, FACTS, read as a description list.

Below md the three cells stack between hairlines and the wire labels are left out, since each cell's text already says how it connects; below lg the divider gives way to a rule. In a right-to-left layout the columns, the chain and the wire flip, while actions and the role name keep their left-to-right order. The header, the buttons and the wire are drawn in once on load with CSS transitions; with reduced motion they simply appear. The block has no state.