GitHub

action.command

Does something and stays on the page: edit, add, remove, retry, share, open, back, refresh, duplicate, move, download, archive, sign out. The label says the verb; pass verb="duplicate", "archive"... to name it for analytics. Pass tone="danger" when it is destructive or hard to undo, like leaving a workspace.

Component

<Action>

Renders

<button>

Profile

UI

Comes from

starter
View as Markdown

Action intents

Example

Preview
Q3 report.pdf
<Layout intent="layout.actions">
  <Action intent="action.command" verb="rename" onClick={rename}>Rename</Action>
  <Action intent="action.command" verb="duplicate" onClick={duplicate}>Duplicate</Action>
  <Action intent="action.command" verb="remove" tone="danger" onClick={remove}>Remove</Action>
</Layout>

Code that says edit, add, remove, retry, share, open, back, refresh, duplicate, move, download, archive, export, signout points here. prongs check warns when an element with this intent has a handler or label that points somewhere else.

Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

  • If it is

    Use

  • Does something and stays on the page: edit, add, remove, retry, share, open, back, refresh, duplicate, move, download, archive, sign out. The label says the verb; pass verb="duplicate", "archive"... to name it for analytics. Pass tone="danger" when it is destructive or hard to undo, like leaving a workspace.

    action.command this page

  • Copying a value to the clipboard

    action.copy

  • Permanently destroying data

    action.delete

  • Finishing a form or step

    action.submit

  • Taking an item out of a list without destroying it

    rather than action.delete
    action.command this page

  • A one-off command with no lasting state

    rather than action.toggle
    action.command this page

  • Sending something to other people

    rather than action.copy
    action.command this page

  • Going back to a step of a flow

    rather than action.navigate
    action.command this page

  • A link to read a piece of content

    rather than action.inspect
    action.command this page

  • A command that does not reorder the table

    rather than action.sort
    action.command this page

Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

For registry authors

Starter intents. These are the intents prongs add puts in your registry, shown in this site’s theme. Yours are your own registry.ts: rename, restyle and add to them, and see them with prongs add gallery.

What this intent is built from and its entry in components/prongs/registry.ts. You only need this to change how it looks or to add an intent like it.

How action.command resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

  • control.base

    Shape and behaviour shared by every button

    inline-flex shrink-0 items-center justify-center gap-2
whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium
transition-colors focus-visible:outline-none
focus-visible:ring-2 focus-visible:ring-ring
focus-visible:ring-offset-2 ring-offset-surface
disabled:pointer-events-none disabled:opacity-50
aria-disabled:pointer-events-none aria-disabled:opacity-50
data-[tone=danger]:[--row-fg:var(--destructive)]
  • control.quiet

    Small text command; shows a pressed state

    h-auto px-0 py-0 font-semibold text-surface-muted
hover:text-foreground hover:underline underline-offset-4
aria-pressed:text-foreground data-[tone=danger]:text-destructive
  • action.command

    Does something and stays on the page: edit, add, remove, retry, share, open, back, refresh, duplicate, move, download, archive, sign out. The label says the verb; pass verb="duplicate", "archive"... to name it for analytics. Pass tone="danger" when it is destructive or hard to undo, like leaving a workspace.

Final classes
inline-flex shrink-0 items-center justify-center gap-2
whitespace-nowrap rounded-md text-sm transition-colors
focus-visible:outline-none focus-visible:ring-2
focus-visible:ring-ring focus-visible:ring-offset-2
ring-offset-surface disabled:pointer-events-none
disabled:opacity-50 aria-disabled:pointer-events-none
aria-disabled:opacity-50
data-[tone=danger]:[--row-fg:var(--destructive)] h-auto px-0
py-0 font-semibold text-surface-muted hover:text-foreground
hover:underline underline-offset-4 aria-pressed:text-foreground
data-[tone=danger]:text-destructive
Definition
TS
'action.command': {
  kind: 'semantic',
  description: 'Does something and stays on the page: edit, add, remove, retry, share, open, back, refresh, duplicate, move, download, archive, sign out. The label says the verb; pass verb="duplicate", "archive"... to name it for analytics. Pass tone="danger" when it is destructive or hard to undo, like leaving a workspace.',
  refs: ['control.quiet'],
  keywords: [
    'edit',
    'add',
    'remove',
    'retry',
    'share',
    'open',
    'back',
    'refresh',
    'duplicate',
    'move',
    'download',
    'archive',
    'export',
    'signout',
  ],
  notFor: [
    { context: 'copying a value to the clipboard', instead: 'action.copy' },
    { context: 'permanently destroying data', instead: 'action.delete' },
    { context: 'finishing a form or step', instead: 'action.submit' },
  ],
},