AllDesignWidgetsBadge Widget

Badge Widget

Add stylized badges that can be reordered and edited inline.

Use the Badge widget to add short, styled labels you can edit and reorder.

Add a Badge widget

1

Open the widget picker

In the page editor, open Widgets.

2

Drag Badge

In Content, drag Badge (badge icon) onto the page.

3

Open Badge Settings

Click the widget and choose Badge Settings.

Badge Settings

The dialog has two tabs: Badge and Style.

Badge tab

  • Variant: Solid, Outline, Soft
  • Size: Small, Medium, Large, X-Large
  • Gap Between Badges
  • Alignment
  • Background Color and Text Color

Style tab

  • Font Family and Font Style
  • Badge border radius controls
  • Shadow

Editing badges

  • Click a badge to edit the text inline.
  • Drag badges to reorder.
  • Use the Add Badge button in the toolbar to create more.

Toolbar actions

  • Badge Settings
  • Add Badge
  • Alignment
  • Animation
  • Position
  • Copy
  • Delete

Use Responsive Design to confirm wrapping and spacing at smaller breakpoints.

Updated Feb 27, 2026

Was this helpful?