Lema Component Catalog
Design System
Introduction
Typography
Spacing
Colors
Lema UI
UploadArtifactStep
CompanyProfileInfo
ProfileStep
AutoCompleteOption
AddedBadge
Anchor
ArtifactHyperlink
CompanyAnalyzingBadge
ArtifactExpirationDate
AssessmentDecisionBadge
CompanyRiskBadge
SelectCompanyRisk
CompanySummaryBadge
ControlStatusBadge
SelectControlStatusBadge
DataTypeBadge
DocumentStatusBadge
TimelineItem
FindingSeverityBadge
SelectFindingSeverityBadge
FindingStatusBadge
SelectFindingStatusBadge
InherentRiskSourceBadge
Suggested
CompanyVerificationBadge
SelectAssessmentStatus
CompanyUrgentBadge
UserStatusBadge
AddBookmarkModal
BookmarkModal
EditBookmarkModal
HeadlessTable
PieChart
ConclusionStats
ControlDistribution
ControlEvidence
InstanceFindingTable
CountryFlagIcon
DashedContainer
DataTypeExplanation
DataType
DataTypeTableCell
DatePicker
Documentation
ControlCard
Dropdown
EditableText
Evidence
ExportContent
ExportButton
FeatureFlagToolTip
FindingDistribution
Hyperlink
IconsToolBar
AssessmentDecisionIcon
CompanyRiskIcon
FindingStatusSymbol
PermissionSymbol
PermissionIcon
RiskLevelIcon
RiskLevelSymbol
TimelineIcon
ImplicationIndicator
ImplicationIndicatorList
PermissionIndicator
PermissionIndicatorList
InventoryHeader
Irq
LastChanged
Loading
MarkdownHyperlink
Markdown
LinkTabs
NavigationBar
OptimisticSwitch
ProfileTeaser
RadioItem
ReadOnlyIrq
CategorySection
SubCategoryItems
LiveblocksAvatars
LiveblocksAvatar
CollaborativeEditor
RichTextEditor
NotesProvider
Toolbar
ToolbarButton
ConnectionStatusBadge
Item
SelectWithComment
InputComment
Select
SourcesAvatarGroup
StatisticsRow
FilterBar
CheckboxFilter
FilterProvider
FilterDropdown
SearchFilter
ShowFilterTagsToggler
FilterTag
FilterTags
InternalTable
GroupedTable
NestedTable
InternalTable
Table
ViewBar
ViewTab
HorizontalTabs
VerticalTabs
TextOverflow
TextWithIcon
AddComment
ChangeCard
CommentCard
DateHeader
Upload
UserAvatar
UserProfileButton
VariancePercentage
SentimentIcon
Primitives
Alert
AlertTitle
AlertDescription
Badge
Button
Calendar
Card
CardHeader
CardTitle
CardDescription
CardContent
CardFooter
Chart
ChartStyle
ChartTooltip
ChartLegend
CommandDialog
CommandShortcut
DialogHeader
DialogFooter
DropdownMenuShortcut
Input
Skeleton
Table
TableHeader
TableBody
TableFooter
TableRow
TableHead
TableCell
TableCaption
Textarea
Toaster
Tooltip
UploadArtifactStep
API Reference
| Prop | Type | Default |
|---|
CompanyProfileInfo
API Reference
| Prop | Type | Default |
|---|---|---|
| companyInfo required | union |
ProfileStep
API Reference
| Prop | Type | Default |
|---|
AutoCompleteOption
API Reference
| Prop | Type | Default |
|---|---|---|
| company required | AutocompleteItem |
AddedBadge
API Reference
| Prop | Type | Default |
|---|
Anchor
Description
Anchor is used as table of contents navigation element, expected to be located at the left side of the screen showing what Section of the page the user is currently viewing. It also allows navigating to the different sections using Web Anchors (the URL value after the hashtag.) For navigation to work, make sure a React element with the matching `id` field is present in the page.
API Reference
| Prop | Type | Default |
|---|---|---|
| items required | Array |
ArtifactHyperlink
API Reference
| Prop | Type | Default |
|---|---|---|
| artifactId required | string |
CompanyAnalyzingBadge
API Reference
| Prop | Type | Default |
|---|
ArtifactExpirationDate
API Reference
| Prop | Type | Default |
|---|---|---|
| expirationDate required | Date |
AssessmentDecisionBadge
API Reference
| Prop | Type | Default |
|---|---|---|
| decision required | AssessmentDecision |
CompanyRiskBadge
API Reference
| Prop | Type | Default |
|---|---|---|
| riskLevel required | RiskLevel | |
| variant | union | 'default' |
SelectCompanyRisk
API Reference
| Prop | Type | Default |
|---|---|---|
| selectedRiskLevel required | RiskLevel | |
| comment required | string | |
| setSelectedRiskLevel required | signature | |
| setComment required | signature |
CompanySummaryBadge
API Reference
| Prop | Type | Default |
|---|---|---|
| companySummary required | PlainMessage | |
| disableAction | boolean | false |
ControlStatusBadge
API Reference
| Prop | Type | Default |
|---|---|---|
| status required | ControlStatus |
SelectControlStatusBadge
API Reference
| Prop | Type | Default |
|---|---|---|
| controlId required | string | |
| status required | ControlStatus | |
| extraTrackingProps | EventProperties | |
| readOnly | boolean | false |
DataTypeBadge
API Reference
| Prop | Type | Default |
|---|---|---|
| variant required | union |
DocumentStatusBadge
API Reference
| Prop | Type | Default |
|---|---|---|
| status required | DocumentStatus | |
| error | DocumentError | |
| lastUpdated | Timestamp | |
| id required | string |
TimelineItem
API Reference
| Prop | Type | Default |
|---|---|---|
| label required | string | |
| lastUpdated | Timestamp | |
| showLastUpdated | boolean |
FindingSeverityBadge
API Reference
| Prop | Type | Default |
|---|---|---|
| level required | RiskLevel | |
| variant | union | 'bold' |
SelectFindingSeverityBadge
API Reference
| Prop | Type | Default |
|---|---|---|
| severity required | RiskLevel | |
| findingId required | string | |
| suggestedEnabled required | boolean | |
| extraTrackingProps | EventProperties | |
| readOnly | boolean | false |
FindingStatusBadge
Documentation
API Reference
| Prop | Type | Default |
|---|---|---|
| status required | FindingStatus |
SelectFindingStatusBadge
Documentation
API Reference
| Prop | Type | Default |
|---|---|---|
| status required | FindingStatus | |
| suggestedWorkStatusEnabled required | boolean | |
| findingId required | string | |
| extraTrackingProps | EventProperties | |
| readOnly | boolean | false |
InherentRiskSourceBadge
API Reference
| Prop | Type | Default |
|---|---|---|
| inherentRiskSource required | InherentRiskSource |
Suggested
API Reference
| Prop | Type | Default |
|---|
CompanyVerificationBadge
API Reference
| Prop | Type | Default |
|---|---|---|
| status required | CompanyStatus |
SelectAssessmentStatus
API Reference
| Prop | Type | Default |
|---|---|---|
| status required | CompanyStatus | |
| onValueChange required | signature |
CompanyUrgentBadge
API Reference
| Prop | Type | Default |
|---|
UserStatusBadge
API Reference
| Prop | Type | Default |
|---|---|---|
| status required | UserStatus |
AddBookmarkModal
API Reference
| Prop | Type | Default |
|---|---|---|
| companyId required | string | |
| visible required | boolean | |
| onClose required | signature |
BookmarkModal
API Reference
| Prop | Type | Default |
|---|---|---|
| visible required | boolean | |
| onCancel required | signature | |
| onSubmit required | signature | |
| initialValues required | BookmarkFormValues | |
| title required | string | |
| submitButtonText required | string |
EditBookmarkModal
API Reference
| Prop | Type | Default |
|---|---|---|
| bookmark required | Bookmark | |
| companyId required | string | |
| visible required | boolean | |
| onClose required | signature |
HeadlessTable
API Reference
| Prop | Type | Default |
|---|---|---|
| disableHover | boolean | |
| header | Array | |
| rows required | Array |
PieChart
API Reference
| Prop | Type | Default |
|---|---|---|
| data required | Array |
ConclusionStats
API Reference
| Prop | Type | Default |
|---|---|---|
| controlCountStats required | Array | |
| findingCountStats required | Array | |
| companyRisk required | RiskLevel |
ControlDistribution
API Reference
| Prop | Type | Default |
|---|---|---|
| controlCountByLevel required | Array |
ControlEvidence
API Reference
| Prop | Type | Default |
|---|---|---|
| control required | GetControlResponse | |
| findings required | Array |
InstanceFindingTable
API Reference
| Prop | Type | Default |
|---|---|---|
| findings required | Array |
CountryFlagIcon
API Reference
| Prop | Type | Default |
|---|
DashedContainer
API Reference
| Prop | Type | Default |
|---|---|---|
| children required | ReactReactNode | |
| className | string | '' |
| active | boolean | true |
DataTypeExplanation
API Reference
| Prop | Type | Default |
|---|
DataType
API Reference
| Prop | Type | Default |
|---|---|---|
| dataType required | DataTypeInfo | |
| action | signature |
DataTypeTableCell
API Reference
| Prop | Type | Default |
|---|---|---|
| dataTypes required | Array |
DatePicker
API Reference
| Prop | Type | Default |
|---|---|---|
| initialDate | Date | |
| onDateChange required | signature | |
| className | string | |
| buttonClassName | string | |
| disabled | boolean | false |
Documentation
API Reference
| Prop | Type | Default |
|---|---|---|
| documentation | DocumentationType | |
| controlIds | Array | |
| readOnly | boolean |
ControlCard
API Reference
| Prop | Type | Default |
|---|---|---|
| controlId required | string | |
| readOnly | boolean |
Dropdown
API Reference
| Prop | Type | Default |
|---|---|---|
| triggerContent required | ReactNode | |
| menuItems required | Array | |
| openOnRightClick | boolean | false |
EditableText
API Reference
| Prop | Type | Default |
|---|---|---|
| text required | string | |
| onSave required | signature | |
| placeholder | string |
Evidence
API Reference
| Prop | Type | Default |
|---|---|---|
| factMarkdown required | string | |
| defaultOpen | boolean | false |
ExportContent
API Reference
| Prop | Type | Default |
|---|
ExportButton
API Reference
| Prop | Type | Default |
|---|---|---|
| getExportContent required | signature | |
| documentTitle | string |
FeatureFlagToolTip
API Reference
| Prop | Type | Default |
|---|---|---|
| featureEnabled required | boolean |
FindingDistribution
API Reference
| Prop | Type | Default |
|---|---|---|
| findingCountByLevel required | Array | |
| hideZero | boolean | |
| hideNumbers | boolean |
Hyperlink
API Reference
| Prop | Type | Default |
|---|---|---|
| color | 'blue' |
IconsToolBar
API Reference
| Prop | Type | Default |
|---|
AssessmentDecisionIcon
API Reference
| Prop | Type | Default |
|---|---|---|
| decision required | AssessmentDecision |
CompanyRiskIcon
API Reference
| Prop | Type | Default |
|---|---|---|
| riskLevel required | RiskLevel | |
| showTooltip | boolean | false |
FindingStatusSymbol
API Reference
| Prop | Type | Default |
|---|
PermissionSymbol
API Reference
| Prop | Type | Default |
|---|
PermissionIcon
API Reference
| Prop | Type | Default |
|---|---|---|
| permission required | PermissionCategory |
RiskLevelIcon
API Reference
| Prop | Type | Default |
|---|---|---|
| level required | RiskLevel | |
| variant | union | 'color' |
RiskLevelSymbol
API Reference
| Prop | Type | Default |
|---|
TimelineIcon
API Reference
| Prop | Type | Default |
|---|---|---|
| timelineCase | union |
ImplicationIndicator
API Reference
| Prop | Type | Default |
|---|---|---|
| implication required | Implication | |
| variant | union |
ImplicationIndicatorList
API Reference
| Prop | Type | Default |
|---|---|---|
| activeImplications required | Array |
PermissionIndicator
API Reference
| Prop | Type | Default |
|---|---|---|
| permission required | PermissionCategory |
PermissionIndicatorList
API Reference
| Prop | Type | Default |
|---|---|---|
| permissions required | Array | |
| showAllIndicators | boolean |
InventoryHeader
API Reference
| Prop | Type | Default |
|---|---|---|
| title required | string | |
| icon required | ReactReactNode | |
| actionElement | ReactReactNode |
Irq
API Reference
| Prop | Type | Default |
|---|---|---|
| companyId required | string |
LastChanged
API Reference
| Prop | Type | Default |
|---|---|---|
| lastChanged required | Date | |
| withTimeCount | boolean | true |
Loading
API Reference
| Prop | Type | Default |
|---|---|---|
| lineCount | number | 5 |
MarkdownHyperlink
API Reference
| Prop | Type | Default |
|---|
Markdown
API Reference
| Prop | Type | Default |
|---|
LinkTabs
API Reference
| Prop | Type | Default |
|---|
OptimisticSwitch
API Reference
| Prop | Type | Default |
|---|
RadioItem
API Reference
| Prop | Type | Default |
|---|---|---|
| disabled | boolean | false |
| isSelect | boolean | false |
| value required | string | |
| id required | string | |
| loading | boolean | false |
| description | string |
ReadOnlyIrq
API Reference
| Prop | Type | Default |
|---|---|---|
| inherentRiskGroups required | Array | |
| companyRisk required | RiskLevel |
CategorySection
API Reference
| Prop | Type | Default |
|---|---|---|
| category required | string | |
| categoryHighestSeverity required | RiskLevel | |
| subCategories required | Array | |
| isMultiple required | boolean |
SubCategoryItems
API Reference
| Prop | Type | Default |
|---|---|---|
| subCategories required | Array |
LiveblocksAvatars
API Reference
| Prop | Type | Default |
|---|
LiveblocksAvatar
API Reference
| Prop | Type | Default |
|---|---|---|
| connectionId required | number | |
| info required | UserMeta['info'] |
CollaborativeEditor
API Reference
| Prop | Type | Default |
|---|
RichTextEditor
API Reference
| Prop | Type | Default |
|---|---|---|
| yText | Y.Text | |
| provider | LiveblocksYjsProvider | |
| isReadOnly | boolean | false |
| text | string |
NotesProvider
API Reference
| Prop | Type | Default |
|---|---|---|
| roomId required | string | |
| loadingNode | ReactReactNode |
Toolbar
API Reference
| Prop | Type | Default |
|---|---|---|
| getQuill required | signature |
ToolbarButton
API Reference
| Prop | Type | Default |
|---|---|---|
| selectionFormat required | Record | |
| format required | union | |
| value | union |
ConnectionStatusBadge
API Reference
| Prop | Type | Default |
|---|---|---|
| status required | union |
Item
API Reference
| Prop | Type | Default |
|---|---|---|
| item required | MenuItem |
SelectWithComment
API Reference
| Prop | Type | Default |
|---|---|---|
| title | string | |
| value | T | |
| placeholder | string | |
| menuItems required | Array | |
| onSave | signature | |
| selectedValueRenderer | signature |
InputComment
API Reference
| Prop | Type | Default |
|---|---|---|
| isOpen required | boolean | |
| comment required | string | |
| setComment required | signature | |
| warningMessage | union |
Select
API Reference
| Prop | Type | Default |
|---|---|---|
| title | string | |
| value | T | |
| placeholder | string | |
| menuItems required | Array | |
| onValueChange | signature |
SourcesAvatarGroup
API Reference
| Prop | Type | Default |
|---|---|---|
| sources required | Array |
StatisticsRow
Documentation
API Reference
| Prop | Type | Default |
|---|---|---|
| items required | Array |
FilterBar
API Reference
| Prop | Type | Default |
|---|---|---|
| filters required | Array | |
| showCheckboxFilter | boolean | |
| checkboxFilterLabel | string | |
| showSearch required | boolean | |
| narrow | literal |
CheckboxFilter
API Reference
| Prop | Type | Default |
|---|---|---|
| label | string |
FilterProvider
API Reference
| Prop | Type | Default |
|---|---|---|
| children required | ReactReactNode | |
| checkboxFilterState | boolean | |
| setCheckboxFilterState | signature |
FilterDropdown
API Reference
| Prop | Type | Default |
|---|---|---|
| selectedOptions | Array | [] |
| onClick | signature | () => {} |
SearchFilter
API Reference
| Prop | Type | Default |
|---|
ShowFilterTagsToggler
API Reference
| Prop | Type | Default |
|---|
FilterTag
API Reference
| Prop | Type | Default |
|---|---|---|
| filterKey required | ReactKey | |
| filterValue required | string | |
| valueRender | valueRender |
FilterTags
API Reference
| Prop | Type | Default |
|---|
InternalTable
API Reference
| Prop | Type | Default |
|---|---|---|
| groupByKey required | intersection | |
| tableColumns required | Array | |
| nestedTableColumns required | Array | |
| dataSource required | Array | |
| nestedTableAntDProps | Omit | |
| toggleGroupModeLabel | string | |
| tableViews | TableViews | |
| tableHeaderActions | ReactNode |
GroupedTable
API Reference
| Prop | Type | Default |
|---|---|---|
| groupByKey required | intersection | |
| tableColumns required | Array | |
| nestedTableColumns required | Array | |
| dataSource required | Array | |
| nestedTableAntDProps | Omit | |
| toggleGroupModeLabel | string | |
| tableViews | TableViews | |
| tableHeaderActions | ReactNode |
NestedTable
API Reference
| Prop | Type | Default |
|---|---|---|
| columns required | Array | |
| dataSource required | Array |
InternalTable
API Reference
| Prop | Type | Default |
|---|---|---|
| columns required | Array | |
| showFilterBar | boolean | true |
| showBorder | boolean | true |
| stickyFilterBar | boolean | false |
| cellAlignTextTop | boolean | false |
| narrowFilterBar | literal | |
| checkboxFilterTitle | string | |
| tableViews | TableViews | |
| tableName | string | |
| dataSource | [] | |
| pagination | false |
Table
API Reference
| Prop | Type | Default |
|---|---|---|
| columns required | Array | |
| showFilterBar | boolean | |
| showBorder | boolean | |
| stickyFilterBar | boolean | |
| cellAlignTextTop | boolean | |
| narrowFilterBar | literal | |
| checkboxFilterTitle | string | |
| tableViews | TableViews | |
| tableName | string |
ViewBar
API Reference
| Prop | Type | Default |
|---|---|---|
| views required | Array | |
| selectedViewUrlKey required | UrlParam | |
| onViewChange | signature |
ViewTab
API Reference
| Prop | Type | Default |
|---|---|---|
| view required | string | |
| total required | number | |
| isSelected required | boolean | |
| onClick required | signature |
HorizontalTabs
API Reference
| Prop | Type | Default |
|---|---|---|
| disabled | boolean | |
| isLoading | boolean | false |
| urlParamKey | UrlParam | |
| actionItem | ReactNode | |
| variant | 'default' |
VerticalTabs
API Reference
| Prop | Type | Default |
|---|
TextOverflow
API Reference
| Prop | Type | Default |
|---|---|---|
| hideToggle | boolean | |
| hideTooltip | boolean |
TextWithIcon
API Reference
| Prop | Type | Default |
|---|---|---|
| text required | union | |
| icon | ReactReactNode | |
| iconPosition | union | 'start' |
AddComment
API Reference
| Prop | Type | Default |
|---|---|---|
| controlId | string | |
| findingId | string |
ChangeCard
API Reference
| Prop | Type | Default |
|---|---|---|
| statement required | string | |
| prevBadge required | ReactReactNode | |
| newBadge required | ReactReactNode | |
| comment | Comment |
CommentCard
API Reference
| Prop | Type | Default |
|---|---|---|
| comment required | Comment |
DateHeader
API Reference
| Prop | Type | Default |
|---|---|---|
| date required | Date |
Alert
API Reference
| Prop | Type | Default |
|---|
AlertTitle
API Reference
| Prop | Type | Default |
|---|
AlertDescription
API Reference
| Prop | Type | Default |
|---|
Badge
API Reference
| Prop | Type | Default |
|---|
Button
API Reference
| Prop | Type | Default |
|---|---|---|
| asChild | false |
Calendar
API Reference
| Prop | Type | Default |
|---|---|---|
| showOutsideDays | true |
Card
API Reference
| Prop | Type | Default |
|---|
CardHeader
API Reference
| Prop | Type | Default |
|---|
CardTitle
API Reference
| Prop | Type | Default |
|---|
CardDescription
API Reference
| Prop | Type | Default |
|---|
CardContent
API Reference
| Prop | Type | Default |
|---|
Chart
API Reference
| Prop | Type | Default |
|---|
ChartStyle
API Reference
| Prop | Type | Default |
|---|---|---|
| id required | string | |
| config required | signature |
ChartTooltip
API Reference
| Prop | Type | Default |
|---|---|---|
| indicator | 'dot' | |
| hideLabel | false | |
| hideIndicator | false |
ChartLegend
API Reference
| Prop | Type | Default |
|---|---|---|
| hideIcon | false | |
| verticalAlign | 'bottom' |
CommandDialog
API Reference
| Prop | Type | Default |
|---|
CommandShortcut
API Reference
| Prop | Type | Default |
|---|
DialogHeader
API Reference
| Prop | Type | Default |
|---|
DropdownMenuShortcut
API Reference
| Prop | Type | Default |
|---|
Input
API Reference
| Prop | Type | Default |
|---|
Skeleton
API Reference
| Prop | Type | Default |
|---|
Table
API Reference
| Prop | Type | Default |
|---|
TableHeader
API Reference
| Prop | Type | Default |
|---|
TableBody
API Reference
| Prop | Type | Default |
|---|
TableRow
API Reference
| Prop | Type | Default |
|---|
TableHead
API Reference
| Prop | Type | Default |
|---|
TableCell
API Reference
| Prop | Type | Default |
|---|
TableCaption
API Reference
| Prop | Type | Default |
|---|
Textarea
API Reference
| Prop | Type | Default |
|---|
Toaster
API Reference
| Prop | Type | Default |
|---|
Tooltip
API Reference
| Prop | Type | Default |
|---|---|---|
| trigger required | ReactReactNode | |
| tooltipDisabled | boolean | |
| triggerClassName | string |
Upload
API Reference
| Prop | Type | Default |
|---|
UserAvatar
API Reference
| Prop | Type | Default |
|---|---|---|
| userId required | string | |
| showEmail | boolean |
UserProfileButton
API Reference
| Prop | Type | Default |
|---|
VariancePercentage
Documentation
Use variance percentage with arrow icon
Use variance percentage with plusMinus icon
Use variance percentage with badge variant
Description
`VariancePercentage` can be used to display a percentage change. It shows the percentage change along with an icon in accordance with the percentage change. it colored in accordance with the sentiment.
API Reference
| Prop | Type | Default |
|---|---|---|
| value required | number | |
| variant | union | 'naked' |
| iconType | union | 'arrow' |
| size | union | 'medium' |
| growthSentiment | Sentiment | Sentiment.POSITIVE |
SentimentIcon
Documentation
Use variance percentage with arrow icon
Use variance percentage with plusMinus icon
Use variance percentage with badge variant
API Reference
| Prop | Type | Default |
|---|---|---|
| direction required | union | |
| size | 'medium' |