Components
Buttons
Clear, predictable controls for every level of intent. Variants share one geometry, with colour and weight carrying the hierarchy.
Variants
Use a single primary action per view. Secondary and ghost buttons support the primary path without competing with it.
Usage
Every control shares the same base class. Add a variant and an optional size modifier.
Markup
<button class="sg-button sg-button--primary">
Save changes
</button>
<button class="sg-button sg-button--secondary sg-button--sm">
Cancel
</button>
<!-- Links can use the same classes -->
<a class="sg-button sg-button--outline" href="/docs">
Read the docs
</a>Rules of thumb
Primary is for the single most important action in a view.
Secondary keeps supporting actions available without pulling focus.
Outline works well on quiet surfaces and in dense toolbars.
Danger is reserved for destructive actions that cannot be undone.