App Tile

<sl-app-tile> | SlAppTile
Since 2.10.0 experimental

App tile renders a single app or integration entry — an icon, a label and an optional sub-label — as a navigable link or action button. It is the building block slotted into app switcher, but can also be used on its own.

sl-app-tile renders one entry: an icon, a primary label and an optional sub-label. When href is set it renders as a native link (<a>); otherwise it renders as a <button>. It is the building block slotted into sl-app-switcher, but it can also be used on its own. In these previews, href="#" is a placeholder; its default navigation is prevented to avoid jumping to the top of the page. 

<sl-app-tile label="HUB24" href="#" icon-src="/assets/images/logo-icon-hub.svg"></sl-app-tile>
<script>
  document.addEventListener(
    'click',
    event => {
      const tile = event.composedPath().find(
        element => element instanceof Element && element.matches('sl-app-tile[href="#"]')
      );
      if (tile) event.preventDefault();
    },
    true
  );
</script>

Examples

Sizes

Use size to switch between the medium (56px icon, 14px label) and large (80px icon, 16px label) presentations. 

<div style="display: flex; gap: 24px; align-items: flex-start;">
  <sl-app-tile size="medium" label="Medium" sub-label="Sublabel" href="#" icon-src="/assets/images/logo-icon-hub.svg"></sl-app-tile>
  <sl-app-tile size="large" label="Large" sub-label="Sublabel" href="#" icon-src="/assets/images/logo-icon-hub.svg"></sl-app-tile>
</div>

Icon Background

The icon background is optional and not tied to any semantic group. Set it with the icon-background attribute (any CSS colour). 

<div style="display: flex; gap: 24px;">
  <sl-app-tile label="Plain" href="#" icon-src="/assets/images/hub24.svg"></sl-app-tile>
  <sl-app-tile label="Indigo" href="#" icon-src="/assets/images/hub24.svg" icon-background="var(--hds-color-supplementary-indigo)"></sl-app-tile>
</div>

Custom Icon

Provide custom icon content (an sl-icon, inline svg, initials, etc.) via the icon slot, which overrides icon-src. Icons fill the box, so the example adds --app-tile-icon-padding, plus a --app-tile-icon-border hairline so the white icon box stays visible on a light surface. 

<div style="display: flex; gap: 24px;">
  <sl-app-tile label="From URL" href="#" icon-src="/assets/images/logo-icon-class.svg"></sl-app-tile>
  <sl-app-tile label="Custom icon" href="#" icon-background="#fff" style="--app-tile-icon-padding: var(--hds-space-3x, 12px); --app-tile-icon-border: 1px solid var(--hds-color-border-subtle, #dddfe3);">
    <sl-icon slot="icon" name="plus"></sl-icon>
  </sl-app-tile>
</div>

Label & Sub-label

label is the primary text; sub-label adds an optional second line. Both truncate to a maximum of two lines, with the full text shown on hover via the native title. 

<div style="display: flex; gap: 24px; align-items: flex-start;">
  <sl-app-tile label="myprosperity" sub-label="Investments" href="#" icon-src="/assets/images/logo-icon-myp.svg" icon-background="var(--hds-color-supplementary-indigo)"></sl-app-tile>
  <sl-app-tile label="Employer Super Administration Portal" sub-label="Manage employer super contributions, members and reporting" href="#" icon-src="/assets/images/logo-icon-myp.svg" icon-background="var(--hds-color-supplementary-indigo)"></sl-app-tile>
</div>

Warning

Set the warning attribute to show a warning status indicator in the top-right corner of the icon. 

<div style="display: flex; gap: 24px; align-items: flex-start;">
<sl-app-tile label="myprosperity" href="#" icon-src="/assets/images/logo-icon-myp.svg" warning icon-background="var(--hds-color-supplementary-indigo)"></sl-app-tile>
<sl-app-tile label="myprosperity" size="large" href="#" icon-src="/assets/images/logo-icon-myp.svg" warning icon-background="var(--hds-color-supplementary-indigo)"></sl-app-tile>
</div>

States

Tiles respond to hover, focus and press (try interacting with them). Use disabled to dim a tile and block interaction. The two groups compare light and dark. 

<div style="display: flex; gap: 24px; flex-wrap: wrap;">
  <div style="display: flex; gap: 16px; padding: 16px; background: var(--hds-color-bg, #fff); border: 1px solid var(--hds-color-border-subtle, #dddfe3); border-radius: 8px;">
    <sl-app-tile label="Default" sub-label="Active" href="#" icon-src="/assets/images/logo-icon-hub.svg"></sl-app-tile>
    <sl-app-tile label="Disabled" sub-label="Unavailable" href="#" icon-src="/assets/images/logo-icon-hub.svg" disabled></sl-app-tile>
  </div>
  <div style="display: flex; gap: 16px; padding: 16px; background: var(--hds-color-neutral-950, #16181d); border-radius: 8px;">
    <sl-app-tile mode="dark" label="Default" sub-label="Active" href="#" icon-src="/assets/images/logo-icon-hub.svg"></sl-app-tile>
    <sl-app-tile mode="dark" label="Disabled" sub-label="Unavailable" href="#" icon-src="/assets/images/logo-icon-hub.svg" disabled></sl-app-tile>
  </div>
</div>

Omit href to render the tile as a <button> for action-only entries (open a dialog, trigger a flow, etc.). Listen for the native click event in both cases. 

<div style="display: flex; gap: 24px;">
  <sl-app-tile label="Open app" href="https://class.com.au" icon-src="/assets/images/logo-icon-class.svg"></sl-app-tile>
  <sl-app-tile id="tile-action" label="Run action" icon-src="/assets/images/logo-icon-class.svg"></sl-app-tile>
</div>
<script>
  document.getElementById('tile-action').addEventListener('click', () => {
    console.log('Action tile clicked');
  });
</script>

Open in New Tab

Set target="_blank" to open the link in a new tab. A rel="noopener noreferrer" is added automatically for security. 

<sl-app-tile label="Hub24" href="https://hub24.com.au" target="_blank" icon-src="/assets/images/hub24-inverse.png" icon-background="var(--hds-color-supplementary-indigo)"></sl-app-tile>

Mode

mode defaults to inherit, so a tile follows the colour scheme of its surrounding context — for example, an app switcher with panel-dark sets its tiles to the dark scheme automatically. Set mode="light" or mode="dark" to force a scheme regardless of context. 

<sl-app-switcher panel-dark>
  <sl-app-tile label="Inherits dark" sub-label="From panel-dark" href="#" icon-src="/assets/images/logo-icon-hub.svg"></sl-app-tile>
  <sl-app-tile mode="light" label="Forced light" sub-label="Ignores context" href="#" icon-src="/assets/images/logo-icon-class.svg"></sl-app-tile>
</sl-app-switcher>

Equal Height

Tiles hug their content and top-align by default, so logos in a row stay on one line even when labels wrap to different lengths. 

<div style="display: flex; gap: 24px;">
  <sl-app-tile label="myprosperity" sub-label="Investments" href="#" icon-src="/assets/images/logo-icon-myp.svg" icon-background="var(--hds-color-supplementary-indigo)"></sl-app-tile>
  <sl-app-tile label="Employer Super Administration Portal" sub-label="Manage employer super contributions, members and reporting" href="#" icon-src="/assets/images/logo-icon-myp.svg" icon-background="var(--hds-color-supplementary-indigo)"></sl-app-tile>
</div>

To make tiles in a row match the tallest instead, set align-self: stretch on them.

<div style="display: flex; gap: 24px;">
  <sl-app-tile style="align-self: stretch;" label="myprosperity" sub-label="Investments" href="#" icon-src="/assets/images/logo-icon-myp.svg" icon-background="var(--hds-color-supplementary-indigo)"></sl-app-tile>
  <sl-app-tile style="align-self: stretch;" label="Employer Super Administration Portal" sub-label="Manage employer super contributions, members and reporting" href="#" icon-src="/assets/images/logo-icon-myp.svg" icon-background="var(--hds-color-supplementary-indigo)"></sl-app-tile>
</div>

Slots

Name Description
icon Custom icon content, overriding icon-src (e.g. an sl-icon or inline svg).

Learn more about using slots.

Properties

Name Description Reflects Type Default
label Primary label. string ''
subLabel
sub-label 		Optional secondary label shown beneath the primary label. string | undefined -
href Navigation URL. When provided the tile renders as a link; otherwise it renders as a button. string | undefined -
target Optional link target. Accepts the standard keywords (_blank, _self, _parent, _top) or a custom window name. string | undefined -
iconSrc
icon-src 		Image URL shown as the tile icon. string ''
iconBackground
icon-background 		Optional background shown behind the icon. Accepts any CSS colour; also settable via --app-tile-icon-bg. string | undefined -
size Tile size. medium uses a 56px icon; large uses an 80px icon and larger label. 'medium' | 'large' 'medium'
warning Shows a warning status indicator in the top-right corner of the icon. boolean false
disabled Disables the tile — dims it and prevents interaction. boolean false
mode Colour scheme. inherit follows the surrounding context; light/dark force a scheme. 'light' | 'dark' | 'inherit' 'inherit'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name Description Default
--app-tile-direction Flex direction of the tile (column for card, row for list row).
--app-tile-align Cross-axis alignment of the tile contents.
--app-tile-text-align Text alignment for the label and sub-label.
--app-tile-gap Gap between the icon and the text.
--app-tile-icon-size Width and height of the icon.
--app-tile-label-size Font size of the primary label.
--app-tile-sub-label-size Font size of the sub-label.
--app-tile-icon-bg Background colour behind the icon (defaults to transparent).
--app-tile-icon-padding Padding around the icon (defaults to 4px; 8px at size large).
--app-tile-icon-border Border around the icon box (defaults to none).
--app-tile-hover-bg Background colour on hover.
--app-tile-press-bg Background colour while pressed.
--app-tile-focus-ring Colour of the focus ring.
--app-tile-disabled-bg Background colour when disabled.
--app-tile-fg Foreground colour of the label.
--app-tile-fg-subtle Foreground colour of the sub-label.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The tile’s interactive wrapper (<a> or <button>).
icon The icon wrapper.
icon-img The icon image.
warning The warning status indicator in the top-right corner.
label The primary label.
sub-label The secondary label.

Learn more about customizing CSS parts.