Rendering modes & colours

Name: Herald
Author: IVG Design

Examples by rendering mode#

Each example is a complete iconButton cell component, so you can paste it into a template. They share the same action, which opens the notification's url.

monochrome draws one colour:

JSON

{"type": "iconButton",
 "symbol": {"name": "bell.badge", "renderingMode": "monochrome", "colors": ["accent"]},
 "action": {"id": "open", "label": "Open", "kind": "url", "url": "{url}"}}

hierarchical draws shades of one colour:

JSON

{"type": "iconButton",
 "symbol": {"name": "speaker.wave.3.fill", "renderingMode": "hierarchical", "colors": ["#007AFF"]},
 "action": {"id": "open", "label": "Open", "kind": "url", "url": "{url}"}}

palette draws each layer in its own colour:

JSON

{"type": "iconButton",
 "symbol": {"name": "bell.badge", "renderingMode": "palette", "colors": ["#FF3B30", "primary"]},
 "action": {"id": "open", "label": "Open", "kind": "url", "url": "{url}"}}

multicolor draws the symbol's own colours:

JSON

{"type": "iconButton",
 "symbol": {"name": "externaldrive.badge.checkmark", "renderingMode": "multicolor"},
 "action": {"id": "open", "label": "Open", "kind": "url", "url": "{url}"}}

Examples by component#

A labelled button with a symbol before the label:

JSON

{"type": "button", "actionRef": "markRead",
 "symbol": {"name": "checkmark", "placement": "leading", "weight": "bold"}}

An icon-only close button. The iconButton draws its own glyph, and the action carries the same symbol so the action looks the same wherever else it appears:

JSON

{"type": "iconButton", "symbol": "xmark", "size": 16,
 "action": {"id": "dismiss", "label": "Dismiss", "kind": "dismiss",
            "symbol": {"name": "xmark", "weight": "bold"}}}

A complete template with a badge symbol, a row whose buttons all get a small dot, and rules that override or add icons on individual actions:

JSON

{"name": "symbols-demo", "app": "webwatcher.email", "layoutVersion": 2, "collapseEmpty": true,
 "grid": {"rows": 2, "cols": 2, "rowSizes": ["auto", "auto"], "colSizes": ["fill", "auto"],
          "gap": 8, "padding": 12, "width": 380},
 "cells": [
  {"id": "title", "row": 0, "col": 0,
   "component": {"type": "text", "binding": "{title}", "style": "title"}},
  {"id": "unread", "row": 0, "col": 1, "align": "topTrailing",
   "component": {"type": "badge", "binding": "{count}", "color": "#FF3B30",
                 "symbol": {"name": "envelope.fill", "scale": "small", "placement": "leading"}}},
  {"id": "acts", "row": 1, "col": 0, "colSpan": 2,
   "component": {"type": "actions", "source": "merged", "layout": "wrap",
                 "symbol": {"name": "circle.fill", "scale": "small"}}}],
 "actionRules": [
  {"match": "markRead", "symbol": {"name": "checkmark.circle", "weight": "semibold"}},
  {"match": "archive", "symbol": "archivebox"},
  {"add": {"id": "followup", "label": "Follow up", "kind": "shortcut",
           "shortcut": "Create follow-up",
           "symbol": {"name": "flag.fill", "renderingMode": "palette",
                      "colors": ["#FF9500", "primary"]}}}]}

Precedence#

A button can get its symbol from the component, from its action, or from a rule. This section says which one wins.

Where	Which symbol is drawn
`button`	The action's `symbol`, else the component's `symbol`.
`actions` row	Each action's `symbol`, including one a rule set, else the component's `symbol`.
`iconButton`	Its own `symbol`, always. The action's symbol is not used.
A rule's `symbol`	It replaces the matched action's symbol. An empty name clears the symbol.

Because every action has its own symbol, two buttons in one cell can show different icons. A symbol with placement: "only" on an action makes that button icon-only.

Edit this page on GitHub