Display — Component Gallery

Alert

DSL Reference →

Alert Variants

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

InformationSuccessWarningError

Information

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Updates Available
A new version of the application is ready to install.

View DSL Source

stack(gap="md")
  alert(variant="info" title="Updates Available" message="A new version of the application is ready to install.")

Success

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Changes Saved
Your profile has been successfully updated.

View DSL Source

stack(gap="md")
  alert(variant="success" title="Changes Saved" message="Your profile has been successfully updated.")

Warning

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Storage Almost Full
You have used 90% of your allocated space.

View DSL Source

stack(gap="md")
  alert(variant="warning" title="Storage Almost Full" message="You have used 90% of your allocated space.")

Error

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Connection Failed
Unable to reach the server. Please check your internet connection.

View DSL Source

stack(gap="md")
  alert(variant="error" title="Connection Failed" message="Unable to reach the server. Please check your internet connection.")

Animated-image

DSL Reference →

Animated Image

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Basic

Basic

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

View DSL Source

row(gap="md" align="center")
  animated-image(src="animation.gif" alt="Playing animation" play)
  animated-image(src="animation.gif" alt="Paused animation")

Animation

DSL Reference →

Animation Basic

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Basic

Basic

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Fade InBounce InSlide In Left

View DSL Source

stack(gap="sm")
  animation(name="fade-in" duration=600 play)
    card Fade In
  animation(name="bounce-in" duration=800 play)
    card Bounce In
  animation(name="slide-in-left" duration=500 play)
    card Slide In Left

Avatar

DSL Reference →

Avatar Content

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

ContentShapesSizesGroup

Content

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

View DSL Source

row(gap="md" align="center")
  avatar(label="Empty")
  avatar(initials="JD" label="John Doe")
  avatar(label="Icon")
    icon(slot="icon" name="person")

Shapes

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

View DSL Source

row(gap="md" align="center")
  avatar(initials="A" label="Circle" shape="circle")
  avatar(initials="B" label="Square" shape="square")
  avatar(initials="C" label="Rounded" shape="rounded")

Sizes

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

View DSL Source

row(gap="md" align="center")
  avatar(initials="S" label="Small" style="--size:1.5rem")
  avatar(initials="M" label="Medium")
  avatar(initials="L" label="Large" style="--size:3.5rem")
  avatar(initials="XL" label="Extra Large" style="--size:5rem")

Group

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

View DSL Source

row(align="center" style="display:flex")
  avatar(initials="AB" label="Avatar 1 of 4" style="border:2px solid var(--wa-color-surface-default)")
  avatar(initials="CD" label="Avatar 2 of 4" style="border:2px solid var(--wa-color-surface-default);margin-left:calc(-1 * var(--wa-space-m))")
  avatar(initials="EF" label="Avatar 3 of 4" style="border:2px solid var(--wa-color-surface-default);margin-left:calc(-1 * var(--wa-space-m))")
  avatar(initials="+2" label="2 more" style="border:2px solid var(--wa-color-surface-default);margin-left:calc(-1 * var(--wa-space-m))")

Badge

DSL Reference →

Badge Variants

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

VariantsAppearancePillDecorations

Variants

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

NeutralBrandSuccessWarningDanger

View DSL Source

row(gap="sm" align="center")
  badge Neutral
  badge(variant="brand") Brand
  badge(variant="success") Success
  badge(variant="warning") Warning
  badge(variant="danger") Danger

Appearance

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

AccentFilledOutlinedFilled Outlined

View DSL Source

row(gap="sm" align="center")
  badge(appearance="accent") Accent
  badge(appearance="filled") Filled
  badge(appearance="outlined") Outlined
  badge(appearance="filled-outlined") Filled Outlined

Pill

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

BrandSuccessDanger

View DSL Source

row(gap="sm" align="center")
  badge(variant="brand" pill) Brand
  badge(variant="success" pill) Success
  badge(variant="danger" pill) Danger

Decorations

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

With IconBrand IconVerified

View DSL Source

row(gap="sm" align="center")
  badge(icon="acorn") With Icon
  badge(variant="brand" icon="acorn") Brand Icon
  badge(variant="success" icon="check") Verified

Callout

DSL Reference →

Callout Variants

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

VariantsSizesIcons

Variants

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Informative calloutSuccess messageWarning messageError messageNeutral callout

View DSL Source

stack(gap="sm")
  callout(variant="brand") Informative callout
  callout(variant="success") Success message
  callout(variant="warning") Warning message
  callout(variant="danger") Error message
  callout(variant="neutral") Neutral callout

Sizes

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Small tipStandard calloutImportant message

View DSL Source

stack(gap="sm")
  callout(size="small") Small tip
  callout(size="medium") Standard callout
  callout(size="large") Important message

Icons

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

With info iconWith warning iconWith success iconWith error icon

View DSL Source

stack(gap="sm")
  callout(icon="circle-info" variant="brand") With info icon
  callout(icon="triangle-exclamation" variant="warning") With warning icon
  callout(icon="circle-check" variant="success") With success icon
  callout(icon="circle-xmark" variant="danger") With error icon

Chat-bubble

DSL Reference →

Chat Interactions

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Sent/ReceivedTyping Indicator

Sent/Received

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Hello! How can I help you today?

10:42 AM

I'm looking for some information about StarSpec.

10:43 AM read

View DSL Source

stack(gap="sm")
  chat-bubble(variant="received" timestamp="10:42 AM")
    text Hello! How can I help you today?
  chat-bubble(variant="sent" timestamp="10:43 AM" status="read")
    text I'm looking for some information about StarSpec.

Typing Indicator

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

One moment, let me look that up...

View DSL Source

stack(gap="sm")
  chat-bubble(variant="received")
    text One moment, let me look that up...
  typing-dots

Icon

DSL Reference →

Icon Sizes

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

SizesVariantsColorsGallery

Sizes

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

View DSL Source

row(gap="md" align="center")
  icon(name="gear" style="font-size:1em")
  icon(name="gear" style="font-size:1.5em")
  icon(name="gear" style="font-size:2em")
  icon(name="gear" style="font-size:3em")

Variants

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

View DSL Source

row(gap="md" align="center")
  icon(name="star" variant="solid" style="font-size:1.5em")
  icon(name="star" variant="regular" style="font-size:1.5em")
  icon(name="star" variant="light" style="font-size:1.5em")
  icon(name="star" variant="thin" style="font-size:1.5em")

Colors

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

View DSL Source

row(gap="md" align="center")
  icon(name="circle-check" variant="solid" style="font-size:1.5em;color:var(--wa-color-green-60)")
  icon(name="triangle-exclamation" variant="solid" style="font-size:1.5em;color:var(--wa-color-yellow-50)")
  icon(name="circle-xmark" variant="solid" style="font-size:1.5em;color:var(--wa-color-red-60)")
  icon(name="circle-info" variant="solid" style="font-size:1.5em;color:var(--wa-color-blue-60)")
  icon(name="star" variant="solid" style="font-size:1.5em;color:var(--wa-color-yellow-40)")
  icon(name="heart" variant="solid" style="font-size:1.5em;color:var(--wa-color-red-50)")
  icon(name="bookmark" variant="solid" style="font-size:1.5em;color:var(--wa-color-blue-40)")
  icon(name="tag" variant="solid" style="font-size:1.5em;color:var(--wa-color-purple-50)")

Gallery

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

View DSL Source

stack(gap="md")
  row(gap="md" align="center" style="font-size:1.5em")
    icon(name="house")
    icon(name="user")
    icon(name="gear")
    icon(name="envelope")
    icon(name="bell")
    icon(name="magnifying-glass")
    icon(name="calendar")
    icon(name="clock")
    icon(name="folder")
    icon(name="file")
    icon(name="image")
    icon(name="lock")
  row(gap="md" align="center" style="font-size:1.5em")
    icon(name="pen")
    icon(name="trash")
    icon(name="copy")
    icon(name="arrow-up")
    icon(name="arrow-down")
    icon(name="arrow-right")
    icon(name="arrow-left")
    icon(name="check")
    icon(name="xmark")
    icon(name="plus")
    icon(name="minus")
    icon(name="ellipsis")

Spinner

DSL Reference →

Spinner

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

BasicInline

Basic

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Loading…

View DSL Source

row(gap="md" align="center")
  spinner
  text Loading…

Inline

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Fetching results

Saving changes

View DSL Source

stack(gap="sm")
  row(gap="sm" align="center")
    spinner
    text Fetching results
  row(gap="sm" align="center")
    spinner
    text Saving changes

Tag

DSL Reference →

Tag Variants

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

VariantsSizesFeatures

Variants

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

NeutralBrandSuccessWarningDanger

View DSL Source

row(gap="sm" align="center")
  tag Neutral
  tag(variant="brand") Brand
  tag(variant="success") Success
  tag(variant="warning") Warning
  tag(variant="danger") Danger

Sizes

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

SmallMediumLarge

View DSL Source

row(gap="sm" align="center")
  tag(size="small") Small
  tag(size="medium") Medium
  tag(size="large") Large

Features

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

PillRemovablePill + Remove

View DSL Source

row(gap="sm" align="center")
  tag(variant="brand" pill) Pill
  tag(with-remove) Removable
  tag(variant="success" pill with-remove) Pill + Remove

DSL Reference ✕