Components Launcher tile

Launcher tile

A full-width launcher tile — a leading icon in a toned circle, a title, and an optional subtitle, rendered as a button. For “pick one to do” surfaces such as the communications chooser (Ask Joey / Dial pad). Horizontal and descriptive, so distinct from the compact vertical koala-action-tile and from the value-selecting koala-radio-card.

<koala-launcher-tile>

Canonical

<koala-launcher-tile icon="@SemanticIcon.Ai" title="Ask Joey"
                     subtitle="Chat about this transaction"
                     x-on:click="$store.communications.open = true" />

One tile: an icon in a toned circle, a title, and a supporting line. Stack two to four in a chooser.

Variants

2 tones

Primary

icon-tone="Primary"

The headline option

Surface

icon-tone="Surface"

A secondary option

States

3 states

Default

Hover / focus

Hover or tab to the tile

Disabled

disabled

Dimmed, not clickable

Hover lifts the fill to bg-surface-container-high; focus uses the shared focus-visible ring; disabled (static or via x-bind:disabled) dims it.

Props

4 attributes

Attribute	Values	Notes
icon	IconName	Leading glyph, shown in the circle.
icon-tone	Primary, Surface	Circle colour. `Primary` is the brand-filled headline option; `Surface` is a calm outlined secondary.
title	string	The tile's headline.
subtitle	string	Optional supporting line under the title.

Renders a <button>; event and Alpine attributes (x-on:click, x-show, x-bind:disabled) pass straight through.

Do & don't

Do Use it to launch an action — each tile does something when tapped.

Don't Don't use it to select a value in a form — that's <koala-radio-card>, which tracks a checked state.