Enrollment

Overview

The enrollment domain provides components for managing course enrollment flows. EnrollmentStatusBadge displays enrollment states (pending, active, completed, suspended, expired, cancelled). EnrollButton handles the enrollment lifecycle with prerequisite validation, capacity checks, waitlist support, and re-enrollment. WaitlistPosition shows queue position with estimated wait times.

Usage

import { EnrollButton, WaitlistPosition } from "@leanicon/web-builder-library/saas";

<EnrollButton
  courseId="course-1"
  onEnroll={() => enrollInCourse("course-1")}
  onContinue={() => resumeCourse("course-1")}
  prerequisites={prerequisites}
  enrollmentStatus={userEnrollmentStatus}
/>

<WaitlistPosition
  entry={waitlistEntry}
  onLeave={() => leaveWaitlist(waitlistEntry.id)}
/>

Variants

EnrollmentStatusBadge - All Statuses

EnrollmentStatusBadge - All Sizes

EnrollButton - Default (Not Enrolled)

EnrollButton - Loading

EnrollButton - Active Enrollment

EnrollButton - Completed

EnrollButton - Course Full (with Waitlist)

EnrollButton - Not Eligible

WaitlistPosition - Default

WaitlistPosition - First Position

Dark

With Incomplete Prerequisites (code only)

<EnrollButton
  courseId="course-1"
  prerequisites={[
    { id: "prereq-1", title: "Introduction to Programming", completed: true },
    { id: "prereq-2", title: "JavaScript Basics", completed: false },
    { id: "prereq-3", title: "HTML & CSS Fundamentals", completed: false },
  ]}
  onEnroll={() => console.log("Enroll")}
/>