Buttons in Design Systems

I really like this post by Nathan Curtis where he discusses how buttons can be applied to a design system:

I love buttons. I can do things with buttons. Take a next step. Make a commitment. Get things done. With buttons, interaction springs to life.

That’s why Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press. As such, buttons are where you apply a design language’s base attributes in ways that’ll ripple throughout more complex component later.

Borders, colors, text styles, icons; there’s so much to consider! But what I really wanted to make a quick note of here is the idea of resilience in a design, particularly where Nathan talks about adding components inside a button, like an icon:

When you add an element, even a simple icon, a button layout shouldn’t break down. Coping with less predictable elements reveals pesky issues of spacing and alignment inside.

So whenever you remove a component from inside a button then the button itself should still work. But this isn’t just important for buttons really, it’s important for any component that we’re building. In short: asking questions about how a certain element might break visually, or in terms of interaction, is vital to the process of building an effective design system.

Direct Link to ArticlePermalink


Buttons in Design Systems is a post from CSS-Tricks

CSS-Tricks

Add a Comment

Your email address will not be published. Required fields are marked *

21