Outline style

Define surfaces and controls primarily with visible outlines.

Live preview Try the effect

DESIGN SYSTEM

Good design
makes content clearer.

Focus on content, hierarchy and thoughtful details.

Explore design

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Define surfaces and controls primarily with visible outlines. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Secondary actions, compact controls and restrained visual systems.

Related concepts

An outline button is a treatment of a control; an outline style applies across the interface.

Describe this effect

Output language

Use consistent outlines and clear spacing to distinguish controls, with explicit hover, focus and selected states.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.