ListItem - Spektral UI

Size

Rounded

Elevation

Background

Navigation

Contextual

Static (no onclick)

train

TGV (tone)

Paris — Lyon

airplanemode_active

Concorde (highlight)

Paris — New York

rocket

Ariane (accent)

Kourou — Mir space station

Svelte

<ListItem
    label="TGV"
    leading={icon_train}
    palette="tone"
    rounded
    active={active === "tgv"}
    onclick={() => active = "tgv"}
>
    Paris — Lyon
</ListItem>
<ListItem
    label="Minitel"
    leading={icon_terminal}
    palette="highlight"
    rounded
    active={active === "minitel"}
    onclick={() => active = "minitel"}
>
    3615 COGIP
</ListItem> 

Prop	Type	Default
size	`"sm" \| "md" \| "lg"`	`"md"`
palette	`"tone" \| "accent" \| "ghost" \| "neutral" \| "error" \| "warning" \| "success" \| "info"`	`"tone"`
elevation	`"none" \| "subtle" \| "hard"`	`"none"`
rounded	`boolean`	`false`
active	`boolean`	`false`
label	`string`	`—`
leading	`Snippet`	`—`
trailing	`Snippet`	`—`
children	`Snippet`	`—`
onclick	`() => void`	`—`

Prop size

Type "sm" | "md" | "lg"

Default "md"

Prop palette

Default "tone"

Prop elevation

Type "none" | "subtle" | "hard"

Default "none"

Prop rounded

Type boolean

Default false

Prop active

Type boolean

Default false

Prop label

Type string

Default —

Prop leading

Type Snippet

Default —

Prop trailing

Type Snippet

Default —

Prop children

Type Snippet

Default —

Prop onclick

Type () => void

Default —