We will continue to update this list as we add or make significant changes to react modules that are part of Canvas.
✅ - Available
🔬 - Labs Components
🕞 - In progress / needs an update.
| Component | Status | Guidelines |
|---|---|---|
| Colors | ✅ | 📘 |
| Depth | ✅ | 📘 |
| Icons | ✅ | 📘 |
| Space | ✅ | 📘 |
| Type | ✅ | 📘 |
| Component | React | CSS | Guidelines |
|---|---|---|---|
| Buttons | |||
| Button - Standard | ✅ | ✅ | 📘 |
| Button - Drop Down | ✅ | ✅ | 📘 |
| Button - Icon | ✅ | ✅ | 📘 |
| Button - Text | ✅ | ✅ | 📘 |
| Action Bar | ✅ | ✅ | 📘 |
| Containers | |||
| Card | ✅ | ✅ | 📘 |
| Drawer | 🔬 | ||
| Table | ✅ | ✅ | 📘 |
| Form Elements | |||
| Form Field | ✅ | ✅ | |
| Checkbox | ✅ | ✅ | 📘 |
| Color Input | ✅ | 📘 | |
| Color Picker | 🔬 | ||
| Date Input | |||
| Drop Down Select | ✅ | ✅ | |
| Numeric Input | |||
| Radio Button | ✅ | ✅ | 📘 |
| TextArea | ✅ | ✅ | 📘 |
| Text Input | ✅ | ✅ | 📘 |
| Switch | ✅ | ||
| Slider | |||
| Indicators | |||
| Avatar | ✅ | ||
| Badge | |||
| Banner | ✅ | ✅ | 📘 |
| Loading Animation | ✅ | ✅ | 📘 |
| Pill | |||
| Progress Bar | |||
| Skeleton Loader | ✅ | 📘 | |
| Status Indicator | ✅ | 📘 | |
| Navigation | |||
| Header | 🔬 | 📘 | |
| Page Header | ✅ | ✅ | 📘 |
| Pagination | 🔬 | ||
| Side Panel | ✅ | ||
| Tabs | |||
| Popups | |||
| Cookie Banner | ✅ | ||
| Modal | ✅ | ✅ | |
| Toast | ✅ | 📘 | |
| Tooltip | ✅ | ✅ | 📘 |
| Menu | 🔬 | ✅ | 📘 |
| Pop Up | ✅ | ✅ | |
| Miscellaneous | |||
| Avatar | ✅ |