FrameSettings
These are the properties you can use to draw a frame with a call-to-action label around the QR Code. When a frame is set, the size prop applies to the frame width and the height grows to fit the label. The QR Code sits on a light panel (the background color, white by default) with a quiet zone of at least 2 modules, so it stays scannable on dark frames.
| Prop | Type | Description | Default | Required | Possible Values |
|---|---|---|---|---|---|
| style | FrameStyle | The style of the frame. | Yes | banner-bottom banner-top border bubble ticket | |
| text | string | The label rendered in the frame. Long labels are condensed to fit the frame width. Pass an empty string to hide the label, the frame then wraps the QR Code evenly. | Scan me! | No | |
| color | string | The frame color. | #000000 | No | |
| textColor | string | The label color. Defaults to white on filled frames (banner-bottom, banner-top, ticket, bubble) and to the frame color on border. | No | ||
| fontFamily | string | The label font family, as a CSS font-family value. See the font family section below for how it behaves in downloads. | sans-serif | No |
Font family
The fontFamily value is set as the font-family of the SVG label, so it accepts any CSS font-family list such as 'Georgia, serif'. The label is always bold. Which font is actually used depends on where the QR Code is displayed:
On the page, the label can use system fonts and any web font your page has already loaded, for example through Google Fonts, next/font or @font-face, as long as the name matches.
Downloads only keep the font name, not the font file. An SVG download shows the font if it is installed where the file is opened. PNG and JPEG downloads are rendered as an isolated image that cannot see your page's web fonts, so they use the font only if it is installed on the user's device.
In every case a missing font falls back to the next font in the list, so always end it with a generic family such as sans-serif or serif. For labels that must look the same everywhere, prefer widely installed fonts like Arial, Helvetica, Georgia or Verdana.