GitHub

Pack

SaaS pack

Apps people work in: records in tables, settings pages, plans and billing.

Added with

npx prongs add saas

Profile

UI

Intents

8

Domains

action.*nav.*choice.*
View as Markdown

Adding it

Terminal
npx prongs add saas

Copies the 8 intents below into your registry, skipping any it already has, and regenerates PRONGS.md. A “not for” line that points at an intent your registry does not have is left out.

Intents

action.* Action

action.inspect<button>

Opens the details of a record in a table, on its name: the whole row opens it, while the other controls in the row, like its menu, still work on their own

action.sort<button>

Sorts a table by a column: the button inside its th. Put aria-sort="ascending" or "descending" on the th of the sorted column; the arrow follows it

action.upgrade<button>

Starts or manages paying for more: upgrade, change plan, manage billing

nav.* Navigation

nav.trail<a>

One link in a breadcrumb trail of the pages above this one. Put them in a nav with aria-label="Breadcrumb" and pass current on the last

choice.* Choice

choice.bulk<button>

Picks a row to act on together with others: the checkbox at the start of a table row. Pass pressed while picked; show a layout.toolbar of actions while any are picked

layout.* Layout

layout.setting<div>

One setting changed in place: its label and help text at the start, its switch or menu at the end. Settings pages, preferences

layout.subnav<div>

A page with its own section nav beside its content: settings, account, a project’s admin. Put the nav first (a nav of nav.page links), then the content. On phones the nav sits above it

layout.locked<div>

A feature the current plan does not include, with how to get it: what it does and an action.upgrade

Next to the starter

The starter intents this pack’s intents are told apart from. Each pack intent’s page says when to use which.

  • 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.

    <button>
  • choice.open

    Shows what is picked and opens the choices to change it: a sort order, sources. The trigger of a Popover picker

    <button>
  • layout.field

    One form field: its label, input, help text and error

    <div>
  • layout.shell

    The frame of an app with a sidebar: one layout.aside beside the main column. Used once, around the signed-in part of the app

    <div>
  • action.start

    The main action of a page or region that begins something: New project, Get started, Sign up, Start a trial. Pass verb="create", "signup"... to name it for analytics.

    <a>
  • choice.filter

    Narrows which items are shown: All, Unread, a source. Pass pressed while it applies

    <button>
  • layout.notice

    A message about the page or the account: check your email, password updated, your trial ends soon. Add an action.dismiss when it can be dismissed

    <div>
  • nav.page

    A link to a page in site or app navigation, including Sign in. Pass current on the page you are on

    <a>

For registry authors

Pack intent. prongs add saas puts the saas pack’s intents in your registry. They are then yours like the starter intents: rename, restyle and add to them, and see them with prongs add gallery.