List
Group related content. Add links or buttons only when an item needs them.
Bullets
Group related points.
Numbered
Use numbers when order matters.
Compact bullets
A borderless list with less space between items.
Compact numbered
Circled numbers without row borders.
With links
Put your link in the action slot. The whole row is the link; the arrow is decorative.
With an action
A bordered row with a native button and your click handler.
React and routing
Put your router’s Link in slot="action". It remains the actual link, including open-in-new-tab behavior. Use a button when an action needs to run before navigation.
Composition
Use the default slot for text. The action slot accepts one native anchor or button, including router components that render one. It takes precedence over href; no nested control is created. Set disabled and current states on your control.
Static items are not focusable. Native anchors, including server-rendered router links, also work before JavaScript loads.
Astro
With the Astro adapter, spread the native slot attribute so Astro does not consume it. With cad-list-item directly, use slot="action" as usual.