Buttons

Buttons trigger actions: save, cancel, submit, delete. They are the most clickable thing on any page. Make their purpose and priority obvious. The CTD Learns App uses MUI's Button component with three variants: contained (filled, for primary actions), outlined (for secondary actions), and text (for tertiary or destructive actions). Rule of thumb: one contained primary button per screen area. Always use sentence case. Never uppercase.

Interactive Preview

Button — All variants and states

Props

variant

color

size

disabled

Start icon

label

Variants, States & Specs

Click any button to inspect its specs. Hover the live buttons to see real transitions.

Small

32px · 14px

Medium

40px · 16px

Large

44px · 16px

Contained

Outlined

Text

With icon

Danger

Disabled

Contained

Medium

Filled background. Use for the primary action on a screen.

Size

Height

40px

Font

16px

Padding-x

20px

Icon gap

8px

Variant

Background

#E8541Aprimary

Text

#FFFFFF

Hover

opacity 0.9

Shared

Border radius

8pxradiusMd

Font family

Inter

Font weight

500

Text transform

none (sentence case)

Transition

150ms ease

Code

Primary

<Button variant="contained" color="primary">
  Create process
</Button>

Outlined

<Button variant="outlined">
  Cancel
</Button>

Danger

<Button variant="text" color="error" startIcon={<DeleteIcon />}>
  Delete workflow
</Button>

With icon

<Button variant="contained" color="primary" startIcon={<AddIcon />}>
  New workflow
</Button>

Spacing & Layout Cards