WorkDS Docs Homepage

IconPanel

Displays an icon in a panel.

Props

color

graypurple

size

123456

variant

tablesolidclassicsurface

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Variants

Dashboard

14 variants found

size 4 iconpanel in Application Headerdashboard

/:environmentId/applications/:applicationId

size=4
size 4 iconpanel in Organization Detailsdashboard
size=4
size 2 iconpanel in Organization Membershipsdashboard
size=2
size 2 iconpanel in Client Secretsdashboard

/:environmentId/applications/:applicationId

size=2
size 3 iconpanel in Environment Carddashboard
size=3
size 3 iconpanel in Diagramdashboard
size=3
size 2 iconpanel in Connected Accountsdashboard
size=2variant=solid
size 2 iconpanel in Connected Accountsdashboard
size=2variant=solid
size 3 iconpanel in Request Oauthdashboard
size=3variant=solid
size 4 iconpanel in Provider Headerdashboard
size=4variant=solid
size 4 iconpanel in Provider Headerdashboard
size=4variant=solid
size 2 iconpanel in Protection Carddashboard
color=graysize=2variant=surface
size 2 iconpanel in Protection Carddashboardstatic
<ListCell.Item description="Detect bots and scripted attacks." title="Bot detection" > <ListCell.ItemSlot side="left"> <IconPanel color="gray" size="2" variant="surface"> <RobotIcon /> </IconPanel> </ListCell.ItemSlot> <ListCell.ItemSlot side="right"> <Flex align="center" gap="4"> {radarMode === RadarMode.Decision && ( <RadarConfigurationStatus isEnabled={configurationData?.botDetection.enabled} isLoading={isLoading} /> )} <ProtectionButton dialog={BotDetectionDialog} disabled={radarMode !== RadarMode.Decision} isLoading={isLoading} isProtectionEnabled={ configurationData?.botDetection.enabled ?? false } /> </Flex> </ListCell.ItemSlot> </ListCell.Item>
color=graysize=2variant=surface
IconPanel in Self Service Slack Channeldashboard

Admin Portal

1 variant found

size 3 iconpanel in Completedadmin-portal

/p/:portalSessionId/bring-your-own-key/:vaultKeySettingsId/completed

size=3variant=solid

Context

PropTypeDefaultRequired
color
"gray" | "purple"—no
size
"1" | "2" | "3" | "4" | "5" | "6" | null—no
variant
"table" | "solid" | "classic" | "surface"—no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

Usage

Used 53 times across 2 packages

Dashboard
51
Admin Portal
2

Variant Distribution

size

1
2%
2
51%
3
31%
4
13%
5
2%

variant

solid
65%
surface
26%
table
9%

color

gray
100%

Where it's used

31 files

packages/dashboard/src/components/self-service-slack-channel/self-service-slack-channel.tsx7
packages/dashboard/src/components/radar/configuration-page/protection-card.tsx6
packages/dashboard/src/components/configuration/request-oauth.tsx3
packages/dashboard/src/components/users/connected-accounts.tsx3
packages/dashboard/src/components/page/help-section.tsx2
packages/dashboard/src/components/pipes/add-provider-dialog.tsx2
packages/dashboard/src/components/pipes/details/provider-header.tsx2
packages/dashboard/src/components/radar/upsell-card.tsx2
packages/dashboard/src/components/users/organization-memberships.tsx2

/:environmentId/authentication/oauth-providers

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/authentication/oauth-providers/oauth-providers-client.tsx2

Show 21 more files