Action vs. link

content.action decides <a> vs <button> from type; variant (how it looks) is kept separate and never changes the tag.

What's configured here (see components/content/action/ and components/content/actions/):

  • type decides the tag: link always renders <a>; button, dialog, dialog-close and submit all render <button>.
  • variant only ever changes appearance (.btn--*) — it never changes the tag.
  • content.actions lays a list of these out with a shared direction/align, so a component never has to build its own action row.

Same type, every variant

type: 'link' throughout — only variant changes.

Same variant, every type

All rendered variant: 'primary'; only the <a>/<button> and its behaviour changes with type. "Open dialog" wires data-dialog-open straight from the action config — no per-usage markup required.

Visit page

content.actions layout

Same two actions; the wrapper owns spacing/alignment via direction/align, each item still owns its own type/variant.

row / left (default)

row / right

column