Intent is an underrated primitive in software design. I’m not talking about user intent, but rather the intent of the creator of the interface.

export type Intent =
  | "default"
  | "muted" // e.g. a grey button
  | "success"
  | "danger"
  | "warning";

The concept of intent is ingrained in nearly every design system. For example, in MUI, a button has a color prop (in MUI, color tokens are defined by their intent). These parts of the system work together like this: <Button color="danger">Delete</Button>.

I prefer calling this prop intent instead of color because it is more to the point. An intent prop can be used for more than just buttons; it can be applied to notifications, banners, results, and various other components.

The MUI method of using colors named for their intent is a bit cumbersome, but allows for an escape hatch for when specific colors are needed. The use of intent as a prop works great in tandem with utility props like those that styled-system introduced.

It is a great abstraction since its implementation lies at the component layer. This provides enough flexibility to create a design language that is consistent while also being narrowable for product needs.

This might sound like a nitpick—what’s in a name¹? But I think it’s important to have an accurate name for such a keystone concept. While software design communicates with users, a design system communicates with one’s peer implementing @company/ui in their product. Intent seems like the best way to create a unified API across the entire system for this purpose.

<Notification.Tray>
  <Notification.Item intent="success">
    Your changes have been saved
  </Notification.Item>
  <Notification.Item intent="warning">
    Your session will expire in 2 minutes
  </Notification.Item>
  <Notification.Item>
    Consider saving your changes with &#8984; + S
  </Notification.Item>
</Notification.Tray>