Table of Contents
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 ⌘ + S
</Notification.Item>
</Notification.Tray>