`badge` element

A short label: New, Sale, a status.

Renders

<span class="iwc-badge">

Required

content or bind.

Native apps

Web, and server-driven native apps

Syntax

badge element

{ "type": "badge" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Property	Type	Description
`content`	`string`	literal text, or an expression starting with = ("=product.name")
`bind`	`string`	take content from data: a field of the current item, or props.x, user.x, params.x, state.store.path
`variant`	`string`	text: heading, h1-h6, subheading, paragraph, caption, label, quote, code; button: primary, secondary, ghost

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Example

badge example

{
  "type": "row",
  "layout": { "gap": "8px" },
  "elements": [
    { "type": "badge", "content": "New" },
    { "type": "badge", "content": "Low stock", "className": "badge-warn" }
  ]
}

Expected output

The HTML IWC rendered for the example above (inside the page's content wrapper). Class names such as i807b63fc are generated per element for its scoped CSS.

Rendered HTML

<div class="iwc-page ipage" id="iwc-content">
  <div class="iwc-row ib6470b3a">
    <span class="iwc-badge i9ea674c4">New</span><span class="iwc-badge i212358da badge-warn">Low stock</span>
  </div>
</div>

Data, conditions & styling

Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.