YUGEN DESIGN SYSTEM

Buttons & Actions

Every touch point where users take action — filled, tonal, outlined, ghost, FABs, segmented controls, and icon buttons.

01 — Common

M3 Button Styles

Filled

Elevated

Tonal

Outlined

Text

States — Disabled

Filled Disabled

Outlined Disabled

Tonal Disabled

02 — FABs

Floating Action Buttons

Small

Regular

Large

Extended — Cyan

New Project

Extended — Violet

Generate

Extended — Pink

Send

03 — Segmented

Segmented Buttons

3-Segment Pill

Day

Week

Month

5-Segment Icon + Label

Edit

Share

Export

Save

Delete

04 — Icon

Icon Buttons

Standard

Tonal

Outlined

Filled