Showing Limits in Platform: A New Design System Component

When I came on at Stoplight, we needed a way to show users how close they were to hitting their limits in terms of:

  • Number of seats in use
  • Number of projects created
  • Number of teams created

To do this, I created a new component in the company’s design system called ProgressBar. The goal was to show users their current status compared to their cap, or limit according to their particular billing plan:

Showing the Teams limit in the platform

We also added limits information to the billing page of the platform to show billing admins how close they were to hitting their plan limits:

Showing Members, Guests, Teams and Project limits in the platform

All of this work helped surface crucial data to clients to help them see how much usage their plan was getting and if they needed to bump their plan up to the next set of limits to increase the number of available seats, teams, or projects. You can see the demo here.