Badge
Add a short, non-clickable label for a category, service type or useful piece of context.
Code name: Badge · Category: Text
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use a badge above a heading to identify a service or audience. Keep the label short, and only display qualifications or trust claims you can support.
In the editor
- Add a Badge near the content it describes.
- Write a short label.
- Choose its style, colour and optional icons.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Badge text="Business strategy" />Behaviour and limitations
- A badge is not a button and has no navigation action.
- Use text for the label. Icons support the text; they should not replace an essential explanation.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
text | string | "Badge" (renderer) | Text. See the usage notes for this block. |
variant | "subtle", "solid", "outlined" | "subtle" (renderer) | Variant. See the usage notes for this block. |
size | "small", "medium", "large" | "large" (renderer) | Size. See the usage notes for this block. |
themeVariant | string | "primary" (renderer) | Theme variant. See the usage notes for this block. |
fontWeight | 400, 500, 600, 700 | 600 (renderer) | Font Weight. See the usage notes for this block. |
startIcon | string | Not declared here | Front Icon. See the usage notes for this block. |
startIconDivider | boolean | true (renderer) | Front Icon Divider. See the usage notes for this block. |
endIcon | string | Not declared here | Back Icon. See the usage notes for this block. |
endIconDivider | boolean | false (renderer) | Back Icon Divider. See the usage notes for this block. |
color | string | Not declared here | Text Color. See the usage notes for this block. |
backgroundColor | string | Not declared here | Background colour. Theme-derived appearance can still depend on the surrounding section. |
align | "left", "center", "right" | "center" (renderer) | Align. See the usage notes for this block. |
alignVertical | See guidance | "" (renderer) | Vertical alignment within the surrounding layout. |
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
css | string | Not declared here | Custom CSS text. Preserve unrelated rules and prefer the dedicated property for supported edits. |
