Standard

Definition: A button is an element that triggers an action or change of state. It completes a specific task.

When to use

Use labelled buttons to provide users with clear indications of what task to complete.

Anatomy

Icon

Label

Body

Variations

Icon button

Button with a left supporting icon

Button with a right actionable icon

Button with text only

Action types

Button confirmatory	Emphasis	Usage
1. Default	Medium	Use if it's related to the main action.
2. Transparent	Low	Use as the third option with subtle attention.
3. Primary	High	Use as the main call-to-action to draw attention.

If you do not have enough screen estate, consider using an icon button.

Button destructive	Emphasis	Usage
4. Default	Medium	Use for irreversible call-to-actions with subtle attention.
5. Transparent	Low	Use as the third option with subtle attention.
6. Primary	High	Use for irreversible call-to-actions to draw attention to the highest priority.

Button tint	Emphasis	Usage
7. Primary	Low	Use for secondary actions that are less important.
8. Secondary	Low	Use for secondary actions that are less important.

Shapes

Round

Square

Squircle

Where to use

✅ Navigation

✅ Forms

✅ Dialogues

✅ Toolbars

✅ Alerts

✅ Multimedia

VUD Product Design System

VUD Product Design System is a collection of design assets, tokens, guidelines, code snippets and components that guarantees consistency and efficiency in the design and development process across enterprise software solutions.