Intent as a Primitive

@sirajchokshi

Table of Contents

  1. Footnotes

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

UI libaries like Blueprint and Evergreen use the name intent for this prop.

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 name1? 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>

Footnotes

  1. From a code perspective, I was so satisfied when I came across the name ‘intent’ when studying Segment’s Evergreen design system. I had been bouncing between color and type, both of which caused collisions with other props.