logoImejis.io

Pill badge rectangle

Rectangle styletype: "rect"

A fully-rounded bar for badges, tags and labels — recolor it on every API call to reflect status or category. Generate badge visuals free with Imejis.

Edit it — this is the actual editor panel
Design JSON — “Pill badge” variant
{
  "title": "Rectangle sample",
  "description": "A rounded dynamic panel",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-rect",
      "key": "panel",
      "type": "rect",
      "position": {
        "x": 280,
        "y": 178
      },
      "rotation": 0,
      "size": {
        "width": 240,
        "height": 64
      },
      "dynamic": true,
      "properties": {
        "fillColor": "#4F46E5",
        "borderRadius": 100,
        "opacity": 1
      }
    }
  ]
}

Rectangle examples

Real renders of the pill badge rectangle — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Live status pill

A red pill sized to sit behind an imagined "LIVE" label on a stream announcement card.

API overrides for this example
{
  "panel.fillColor": "#EF4444",
  "panel.borderRadius": 100,
  "panel.boxShadow": "0 4px 14px rgba(239,68,68,0.4)"
}

Category tag on dark

A teal tag pill for labeling an article category on a dark blog OG image.

API overrides for this example
{
  "panel.fillColor": "#0D9488",
  "panel.borderRadius": 100
}

When to use the pill badge style

  • Status badges colored by state
  • Category tags on article cards
  • Button-style call-to-action visuals

Use it dynamically via the API

Recolor per render with '<key>.fillColor' (or just '<key>'); opacity and borderColor are overridable too.

Full API request with this variant's current values — the playground above sends only the properties you change
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "panel.fillColor": "#4F46E5",
    "panel.borderRadius": 100,
    "panel.opacity": 1
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other rectangle styles

DefaultOutlined cardPill badge

See the rectangle component page for the full property reference and FAQs.