WorkDS Docs Homepage

Chip

Displays a stylized element that represents a value or a related action.

Props

as

buttonspan

color

grayredbluegreen

removeLabel

string

weight

boldregular

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

Usage

Colors

Use the color prop to control the color of the chip.

With icons

You may nest icons directly inside the chips. The correct gap between the icon and the text is provided automatically.

Weights

Use the weight prop to set the weight of the chip. Normally, you should use bold weight for chips that represent unique values, and regular weight for related actions.

With remove button

If you pass a onRemove function, a small button will be rendered on the right side of the chip.

With Code component

You can compose Chip together with the Code component.

As button

Use the as prop to render the chip as a button. This prop adds styles for the interactive states, like hover and focus.

Variants

Dashboard

4 variants found

Chip in Application Detailsdashboard

/:environmentId/applications/:applicationId

color=gray
Chip in Step 1 Create Applicationdashboard

/:environmentId/identity-bridge/auth0/components/steps

color=gray
Chip in Jit Provisioning Dialogdashboard
Chip in Api Keys Tabledashboard

Context

PropTypeDefaultRequired
as
"button" | "span"—no
color
ChipColor—no
removeLabel
string—no
weight
"bold" | "regular"—no

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

Usage

Used 23 times across 2 packages

Dashboard
21
Admin Portal
2

Variant Distribution

color

gray
100%

weight

bold
67%
regular
33%

Where it's used

18 files

/:environmentId/identity-bridge/auth0/components/steps

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/identity-bridge/auth0/components/steps/step-1-create-application.tsx4
packages/dashboard/src/components/organizations/organization/domain-policy-dialog.tsx2
packages/dashboard/src/components/stateful-table/cells/chip-cell.tsx2
packages/dashboard/src/components/api-keys/api-keys-table.tsx1
packages/dashboard/src/components/audit-logs/audit-logs-export-csv-modal/dataset-picker.tsx1
packages/dashboard/src/components/configuration/audit-logs/audit-log-events-table/audit-log-events-table-row.tsx1
packages/dashboard/src/components/flags/flag/flag-details.tsx1
packages/dashboard/src/components/organizations/organization/add-user-to-organization-dialog.tsx1

/:environmentId/roles-and-permissions/resource-types/edit/content-panel

packages/dashboard/src/app/(private)/(chromeless)/[environmentId]/roles-and-permissions/resource-types/edit/content-panel/parent-resource-types-list.tsx1

/:environmentId/applications/:applicationId

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/applications/[applicationId]/application-details.tsx1

Show 8 more files