> For the complete documentation index, see [llms.txt](https://developer.usemultiplier.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.usemultiplier.com/multiplier-embed-sdks/components/employee-offboarding.md).
# Employee Offboarding
The `EmployeeOffboarding` namespace provides a complete set of components to embed the resignation or termination workflows directly into your application. This allows your users (Admins or Managers) to initiate the offboarding process for an employee without leaving your platform.
### Container Component
The core component is `EmployeeOffboarding.Container`. It encapsulates all the business logic, API mutations, and multi-step UI forms required for the offboarding wizard.
> **Layout Note:** This component is designed to fill 100% of the width of its parent container. For the best user experience, we recommend wrapping it in a container with a defined `max-width` (e.g., `742px`) or placing it inside a Modal/Dialog.
### Usage Examples
#### Basic Usage
Embeds the form directly into a page.
```tsx
import { EmployeeOffboarding } from '@Multiplier-Core/partner-sdk-react';
function OffboardingPage() {
return (
Offboard Employee
{
console.log(`${result.type} initiated for ${result.contractId}`);
// Redirect or show success message
}}
onCancel={() => {
console.log('User cancelled');
// Navigate back
}}
onError={(error) => {
console.error('Offboarding failed:', error);
}}
/>
);
}
```
#### Usage in a Dialog (Modal)
A common pattern is to trigger offboarding from a table or list view using a modal.
```typescript
import { EmployeeOffboarding } from '@Multiplier-Core/partner-sdk-react';
const OffboardingModal = ({ contractId, isOpen, close }) => {
if (!isOpen) return null;
return (
{
alert(`Successfully initiated ${result.type}`);
close();
}}
onCancel={close}
/>
);
};
```
### Props
| **Prop** | **Type** | **Required** | **Description** |
| ------------ | ---------------------------------------------- | ------------ | --------------------------------------------------------------------- |
| `contractId` | `string` | Yes | The unique ID of the contract to be offboarded. |
| `onComplete` | `(result: OffboardingResult) => void` | No | Called when the workflow is successfully submitted. |
| `onCancel` | `() => void` | No | Called when the user clicks "Cancel" or "Close" in the UI. |
| `onError` | `(error: unknown) => void` | No | Called if the submission mutation fails due to API or network errors. |
| `children` | `(props: ContainerChildrenProps) => ReactNode` | No | Render prop for custom layouts (advanced usage). |
### Types
#### OffboardingResult
The object returned in the `onComplete` callback:
```typescript
type OffboardingResult = {
type: ContractOffboardingType; // 'RESIGNATION' | 'TERMINATION' | 'DID_NOT_JOIN'
contractId: string; // The ID of the contract that was offboarded
}
```
### CSS Customization
The offboarding container exposes several CSS classes for granular styling control. You can override these in your global CSS file.
| **Component Part** | **Class Name** |
| --------------------------------------------- | -------------------------------------------------- |
| Main Container | `.multiplier-sdk__offboarding-container` |
| Start Screen | `.multiplier-offboarding__start` |
| Selection Cards | `.multiplier-offboarding__cards` |
| Select Offboarding reason > Resignation Card | `.multiplier-offboarding__card-resignation` |
| Select Offboarding reason > Termination Card | `.multiplier-offboarding__card-termination` |
| Select Offboarding reason > Did Not Join Card | `multiplier-offboarding__card-did-not-join` |
| Selected Reason Card | `.multiplier-offboarding__card--active` |
| Card Icon's container | `.multiplier-offboarding__card-icon` |
| Card's description text | `.multiplier-offboarding__card-desc` |
| Termination Clause | `.multiplier-offboarding__termination-clause-list` |
**Action buttons**
| **Component Part** | **Class Name** |
| --------------------------------------------- | ---------------------------------------- |
| Action Buttons | `.multiplier-offboarding__actions` |
| Cancel button (on the start/reschedule pages) | `.multiplier-offboarding__action-cancel` |
| Back button (on multi-step pages) | `.multiplier-offboarding__action-back` |
| Submit/Continue button | `.multiplier-offboarding__action-submit` |
**Step Indicator**
| **Component Part** | **Class Name** |
| ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| The circular step indicator element. Useful for resetting `border-radius` if your global styles override `--border-radius---full`. | `.multiplier-common__workflow-progress-node-indicator` |
### Example Override
```css
* Style offboarding cards */
.multiplier-offboarding__card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
/* Style only the selected offboarding card */
.multiplier-offboarding__card--active {
border-color: #3b82f6 !important;
}
/* Style the resignation card specifically */
.multiplier-offboarding__card-resignation {
/* custom styles for resignation card */
}
/* Customize offboarding action buttons */
.multiplier-offboarding__action-submit button {
background-color: #1e40af !important;
}
/* Style Cancel button differently from Back button */
.multiplier-offboarding__action-cancel button {
color: #6b7280 !important;
}
/* Fix step indicator circles if your global CSS overrides border-radius */
.multiplier-common__workflow-progress-node-indicator {
--border-radius---full: 9999px !important;
}
```
For more details on theming, refer to the [CSS & Customization](/multiplier-embed-sdks/css-and-customization.md) guide.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://developer.usemultiplier.com/multiplier-embed-sdks/components/employee-offboarding.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.