Alerts, badges, progress bars, stats, lists, tables, tooltips, images, video, audio, icons, and avatars.

Data and Feedback Components

Components for displaying information, giving feedback, and showing media.

alert

Notification banners. Set the type to change the color and icon.

alert "Saved successfully." [type=success]
alert "Check your input." [type=warning]
alert "Something went wrong." [type=error]
alert "New version available." [type=info]

Type	What it looks like
`info`	Blue, informational
`success`	Green, positive
`warning`	Yellow/orange, caution
`error`	Red, something broke

badge

A small colored label. Good for tags, statuses, and counts.

badge "New" [color=primary]
badge "Sale" [color=red]
badge "Pro" [color=purple]

Available colors: primary, green, red, orange, purple, blue, pink

progress

A progress bar. Pass a number from 0 to 100.

progress "75"

spinner

An animated loading spinner.

spinner

stat

A big number with a label underneath. Good for dashboards and landing pages.

stat "99.9%" [label=Uptime]
stat "1.2k" [label=Users]
stat "<1s" [label=Build Time]

list + listitem

Bulleted or numbered lists.

// bulleted (default)
list:
    listitem "First item"
    listitem "Second item"

// numbered
list [type=ordered]:
    listitem "Step one"
    listitem "Step two"

table

Data tables. Use thead, tbody, tr, th, and td just like you'd expect.

table:
    thead:
        tr:
            th "Name"
            th "Role"
    tbody:
        tr:
            td "Alice"
            td "Developer"
        tr:
            td "Bob"
            td "Designer"

A navigation trail showing where you are.

breadcrumb:
    link "Home" [page=index]
    link "Docs" [href=#]
    text "Components"

Wrap any element to give it a hover tooltip.

tooltip [text=This is a tooltip]:
    button "Hover me"

image / img

Displays an image. Pass the file path or URL as the argument.

image "photo.jpg"
image "banner.png" [alt=Banner image]

Images in your project folder are automatically copied to the build output.

video

Embeds a video with playback controls.

video "demo.mp4"

audio

Embeds audio with playback controls.

audio "song.mp3"

icon

An inline icon. Usually an emoji, but can be any short text.

icon ">"
icon "*"

avatar

A circular user avatar. Pass an image path, or leave it blank for a default silhouette.

avatar "profile.jpg"
avatar