Atoms

The small shapes that appear inside widget payloads everywhere.

Atoms keep payloads consistent: the same text, color and image shapes work in every widget, built in or custom. Most accept a bare string shorthand for the common case.

TextData#

json

"Hello"
 
{ "text": "Hello", "font": { "size": 16, "weight": "semibold" }, "color": "#767676",
  "alignment": "center", "max_lines": 2, "is_markdown": true }

Field	Type	Default	Description
`text`req	String		The content. Bare string shorthand accepted.
`font`	FontData		Size and weight, or a theme token.
`color`	ColorData		Foreground color.
`alignment`	String	leading	leading, center or trailing.
`max_lines`	Int		Line limit. Omit or 0 for unlimited.
`is_markdown`	Bool	false	Parse inline Markdown before rendering.

ColorData#

Field	Type	Description
`hex`	String	#RRGGBB or #AARRGGBB, alpha first. Bare string shorthand accepted.
`dark_hex`	String	Dark appearance override.
`token`	String	Design system token, resolved by the host theme. Wins over hex.
`alpha`	Double	Opacity multiplier, 0 to 1.

FontData#

Field	Type	Default	Description
`size`	Double		Point size.
`weight`	String	regular	regular, medium, semibold, bold, heavy, light.
`token`	String		Design system token. Wins over size and weight.

ImageData#

Field	Type	Default	Description
`url`req	String		Remote URL. Bare string shorthand accepted.
`aspect_ratio`	Double		Width over height. Reserves the shape before loading.
`scale_mode`	String	fill	fill crops to the shape; fit letterboxes.
`corner_radius`	Number \| Corners		Rounding for the image itself.
`placeholder_color`	ColorData		Shown while loading.
`shimmer`	Bool	false	Animate the placeholder with a shimmer sweep.
`alt`	String		Announced by VoiceOver. An image with no alt is treated as decorative and hidden from assistive technology, so send one for anything carrying meaning.

IconData#

Field	Type	Default	Description
`symbol`req	String		SF Symbol name. Bare string shorthand accepted.
`size`	Double	17	Point size.
`color`	ColorData		Tint.
`action`	Action		Fires when the icon is tapped.

ButtonData#

Field	Type	Default	Description
`title`req	TextData		The label.
`style`	String	solid	solid, outline or plain.
`bg_color`	ColorData		Fill for solid, stroke and text tint otherwise.
`corner_radius`	Number \| Corners		Shape override.
`icon`	IconData		Leading icon.
`full_width`	Bool	false	Stretch to the available width.
`disabled`	Bool	false	Renders dimmed and inert.
`action`	Action		Dispatched on tap.

TagData#

Field	Type	Default	Description
`text`req	TextData		The pill label.
`bg_color`	ColorData		Pill fill.
`border_color`	ColorData		Outline.
`corner_radius`	Number \| Corners	6	Pill shape.
`icon`	IconData		Leading icon.
`action`	Action		Dispatched on tap.

Insets#

Field	Type	Description
`top`	Double	Send only the sides you need.
`left`	Double
`right`	Double
`bottom`	Double