Steve Kinney

Building Design Systems with Storybook

Exercise: Adding Button Size Variant and Controls

Buttons can come in all shapes and sizes, the buttons in our design system come in four sizes—extra-small, small, medium, and large —with medium being the default size. Here is some CSS to get us started. This is included in button.module.css.

.small {
	font-size: 0.875rem;
	padding: 0.25rem 0.5rem;
}

.medium {
	font-size: 0.875rem;
	padding: 0.375rem 0.625rem;
}

.large {
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem;
}

When you’re ready, we can walk through a solution.

Last modified on .