Feedback

Feedback components tell users what is happening in the system: what succeeded, what failed, what is loading. Status badges (chips) show state at a glance with color (green = active, yellow = paused, red = error). Empty states show when there is no data yet, and always include a clear next action. Modals interrupt the user for a focused task. Use them sparingly, and always give users a way to cancel. Accordions hide secondary content until requested. Useful for FAQs or settings groups.

Interactive Preview

Status Badge — Workflow status chips

Active

Props

status

Status Badges

Click any badge to inspect its specs.

Active
Draft
Paused
Archived
Property
Value

Background

#DCFCE7successLight

Text

#15803DsuccessDark

MUI prop

color="success"

Use for

Workflows currently running, accepted students
Shared
Property
Value

Height

24px

Border radius

9999pxradiusFull

Font size

12px

Font weight

500

Padding-x

10px

MUI component

Chipsize="small"

Empty State

Without CTA
No workflows yet

Create your first workflow to get started.

With CTA
No workflows yet

Create your first workflow to get started.

Modal / Dialog

Create new process

Property
Value

Width

default440px
·wide/form640px

Border radius

10pxradiusLg

Shadow

0 10px 25px rgba(0,0,0,0.15)shadow.modal

Scrim

rgba(0,0,0,0.45)

Title font

18px
·600

Actions padding

16px 24px

Actions gap

8px

Decision Modal

Specialized modal used by the Admin Approvals pattern. Captures an Approve or Decline choice plus an optional comment. Used for single-row and bulk decisions.

Review application

Jane Doe

jane@email.com

Application: APP-2024-002, Canada, 1992

Property
Value

Container

DialogMUI modal, max-width sm

Header

title + close icon1px divider below

Subject summary

name + email + key contextfrom row data

Choice input

RadioGroupApprove / Decline

Comment field

TextField multilineoptional

Submit

primary contained

Cancel

outlined

Disabled state

Submit disabled until choice picked

Bulk Action Toolbar

Slides into a table toolbar when one or more rows are selected. Shows the selected count and exposes batch actions. Used by Admin Approvals and any future tables that need bulk operations.

3 selected
Property
Value

Trigger

1+ rows selected via checkbox

Container

Stack inside table toolbaraction.hover background

Selected count

Chip with onDeleteclick X to clear

Primary action

contained successApprove

Destructive action

outlined errorDecline

Layout

stacks on xsrow from sm

Visibility

hidden when nothing selected

Process Card

A clickable card showing a process and its pending count. Used in the Admin Approvals queue and reusable anywhere a list of processes needs a count badge.

Admissions

Application Review

12

Mentoring

Mentor Approval

0

Property
Value

Container

Paper1px border, radiusLg, overflow hidden

Color stripe

4px topprocess accent color

Title

18px600 weight

Subtitle

14pxgray500, decision name

Count badge

36px circlestripe color, white text

Active

background.paperhover: primary border

Empty (zero)

action.hover bgopacity 0.7, gray400 stripe

On click

Navigate to detail screen for that process

Accordion

Collapsible sections for progressive disclosure. Used for FAQ sections, settings groups, and any content that benefits from show/hide behavior.

CTD Learns is a learning management platform built by Code the Dream to support students through their coding education journey.

Navigate to the Processes page and click "New Process". Fill in the name and description, then add workflow steps.

Yes. Open the workflow editor, click the 3-dot menu in the header, and select "Duplicate workflow".

Property
Value

Border

1px solidgray200

Border radius

8pxradiusMd

Shadow

none

Divider line

hidden (::before removed)

Summary font

16px600 weight

Expanded margin

0 (no spacing change on expand)

Expand icon

ExpandMoreIcon

Code

Status badge
<Chip
  label="Active"
  color="success"
  size="small"
/>
Dialog
<Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
  <DialogTitle>
    Create new process
    <IconButton onClick={handleClose} sx={{ position: 'absolute', right: 8, top: 8 }}>
      <CloseIcon />
    </IconButton>
  </DialogTitle>
  <DialogContent>
    <TextField label="Process name" fullWidth />
    <TextField label="Description" fullWidth multiline minRows={3} />
  </DialogContent>
  <DialogActions>
    <Button variant="outlined" onClick={handleClose}>Cancel</Button>
    <Button variant="contained" onClick={handleCreate}>Create process</Button>
  </DialogActions>
</Dialog>
Accordion
<Accordion>
  <AccordionSummary expandIcon={<ExpandMoreIcon />}>
    <Typography fontWeight={600}>Section title</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography variant="body2" color="text.secondary">
      Collapsible content here.
    </Typography>
  </AccordionDetails>
</Accordion>
Empty state pattern
<Box textAlign="center" py={6}>
  <InboxIcon sx={{ fontSize: 48, color: 'text.disabled', mb: 2 }} />
  <Typography variant="h5" mb={1}>No workflows yet</Typography>
  <Typography variant="body2" color="text.secondary" mb={3}>
    Create your first workflow to get started.
  </Typography>
  <Button variant="contained" startIcon={<AddIcon />}>
    New workflow
  </Button>
</Box>
NavigationDo's & Don'ts