Roma / Components

Button

Heavy and unmistakable, with a slight 4px corner. One Primary button per view; Secondary and Outline for everything else.

Light

Dark

<button class="tl-button">Subscribe</button>
<button class="tl-button tl-button--secondary">Read more</button>
<button class="tl-button tl-button--outline">Cancel</button>
<a class="tl-button tl-button--lg" href="/shop">Visit the shop</a>

Variants and states

	Default	Hover	Pressed	Focus
Primary	Button	Button	Button	Button
Secondary	Button	Button	Button	Button
Outline	Button	Button	Button	Button

Sizes

There is no small Primary button. Its label would drop below 19px bold, where Lab Coat on Tomato fails contrast.

Guidelines

Use one Primary button for the main action in a view. Write labels as short verbs: Subscribe, Buy, Save.

Don't

Line up several Primary buttons, or use a button for navigation that should be a link.

Figma: Button component set, 30 variants (Variant × Size × State), Label property.