| Props | +Type | +Description | +
|---|---|---|
| className | +string | +Optional CSS class for additional styling | +
| anchorSelect | +CSS selector | +Selector for the tooltip anchor (the element that triggers the tooltip) | +
| content | +string | +The content you want to display within the tooltip | +
| delayHide | +number | +The delay in seconds before hiding the tooltip after the cursor leaves the anchor | +
| offset | +number | +The offset in pixels for positioning the tooltip | +
| noArrow | +boolean | +If `true`, hides the arrow on the tooltip | +
| isOpen | +boolean | +If `true`, the tooltip is open by default | +
| place | +`PlacesType` string from `react-tooltip` | +Specifies the placement of the tooltip. Values include `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, and `left-end` | +
| positionStrategy | +`PositionStrategy` string from `react-tooltip` | +Position strategy for the tooltip. Has two values: `absolute` and `fixed` | +
| Props | +Type | +Description | +
|---|---|---|
| text | +string | +The content you want to display in the overflowing text area | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| isAnimating | +boolean | +Controls whether the checkmark is animating | +`false` | +
| color | +string | +Color of the checkmark | +Theme's gray0 | +
| duration | +number | +The duration of the animation in seconds | +0.5 seconds | +
| size | +number | +The size of the checkmark | +28 pixels | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| size | +`ChipSize` enum | +Specifies the size of the chip. Has two options: `large` and `small` | +small | +
| disabled | +boolean | +Indicates whether the chip is disabled | +false | +
| clickable | +boolean | +Specifies whether the chip is clickable | +true | +
| label | +string | +Represents the text content or label inside the chip | ++ |
| maxWidth | +string | +Specifies the maximum width of the chip | +200px | +
| variant | +`ChipVariant` enum | +Specifies the visual style or variant of the chip. Has four options: `regular`, `highlighted`, `transparent`, and `rounded` | +regular | +
| accent | +`ChipAccent` enum | +Determines the text color or accent color of the chip. Has two options: `text-primary` and `text-secondary` | +text-primary | +
| leftComponent | +`React.ReactNode` | +An optional React/node component that you can place on the left side of the chip | ++ |
| rightComponent | +`React.ReactNode` | +An optional React/node component that you can place on the right side of the chip | ++ |
| className | +string | +An optional class name to apply additional custom styles to the chip | ++ |
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| linkToEntity | +string | +The link to the entity | ++ |
| entityId | +string | +The unique identifier for the entity | ++ |
| name | +string | +The name of the entity | ++ |
| pictureUrl | +string | +The URL of the entity's picture | ++ |
| avatarType | +Avatar Type | +The type of avatar you want to display. Has two options: `rounded` and `squared` | +rounded | +
| variant | +`EntityChipVariant` enum | +Variant of the entity chip you want to display. Has two options: `regular` and `transparent` | +regular | +
| LeftIcon | +IconComponent | +A React component representing an icon. Displayed on the left side of the chip | ++ |
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| size | +number | +The height and width of the icon in pixels | +24 | +
| color | +string | +The color of the icons | +currentColor | +
| stroke | +number | +The stroke width of the icon in pixels | +2 | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| size | +number | +The height and width of the icon in pixels | +24 | +
| stroke | +number | +The stroke width of the icon in pixels | +2 | +
| Props | +Type | +Description | +
|---|---|---|
| + | + | + |
| Props | +Type | +Description | +
|---|---|---|
| className | +string | +Optional name for additional styling | +
| color | +string | +Color of the tag. Options include: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, `gray` | +
| text | +string | +The content of the tag | +
| onClick | +function | +Optional function called when a user clicks on the tag | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| duration | +number | +The total duration of the progress bar animation in milliseconds | +3 | +
| delay | +number | +The delay in starting the progress bar animation in milliseconds | +0 | +
| easing | +string | +Easing function for the progress bar animation | +easeInOut | +
| barHeight | +number | +The height of the bar in pixels | +24 | +
| barColor | +string | +The color of the bar | +gray80 | +
| autoStart | +boolean | +If `true`, the progress bar animation starts automatically when the component mounts | +`true` | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| size | +number | +The size of the circular progress bar | +50 | +
| barWidth | +number | +The width of the progress bar line | +5 | +
| barColor | +string | +The color of the progress bar | +currentColor | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| className | +string | +Optional class name for additional styling | ++ |
| Icon | +`React.ComponentType` | +An optional icon component that's displayed within the button | ++ |
| title | +string | +The text content of the button | ++ |
| fullWidth | +boolean | +Defines whether the button should span the whole width of its container | +`false` | +
| variant | +string | +The visual style variant of the button. Options include `primary`, `secondary`, and `tertiary` | +primary | +
| size | +string | +The size of the button. Has two options: `small` and `medium` | +medium | +
| position | +string | +The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle` | +standalone | +
| accent | +string | +The accent color of the button. Options include: `default`, `blue`, and `danger` | +default | +
| soon | +boolean | +Indicates if the button is marked as "soon" (such as for upcoming features) | +`false` | +
| disabled | +boolean | +Specifies whether button is disabled or not | +`false` | +
| focus | +boolean | +Determines if the button has focus | +`false` | +
| onClick | +function | +A callback function that triggers when the user clicks on the button | ++ |
| Props | +Type | +Description | +
|---|---|---|
| variant | +string | +The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` | +
| size | +string | +The size of the buttons within the group. Has two options: `medium` and `small` | +
| accent | +string | +The accent color of the buttons within the group. Options include `default`, `blue` and `danger` | +
| className | +string | +Optional class name for additional styling | +
| children | +ReactNode | +An array of React elements representing the individual buttons within the group | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| className | +string | +Optional name for additional styling | ++ |
| Icon | +`React.ComponentType` | +An optional icon component that's displayed within the button | ++ |
| title | +string | +The text content of the button | ++ |
| size | +string | +The size of the button. Has two options: `small` and `medium` | +small | +
| position | +string | +The position of the button in relation to its sublings. Options include: `standalone`, `left`, `middle`, `right` | ++ |
| applyShadow | +boolean | +Determines whether to apply shadow to a button | +`true` | +
| applyBlur | +boolean | +Determines whether to apply a blur effect to the button | +`true` | +
| disabled | +boolean | +Determines whether the button is disabled | +`false` | +
| focus | +boolean | +Indicates if the button has focus | +`false` | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| size | +string | +The size of the button. Has two options: `small` and `medium` | +small | +
| children | +ReactNode | +An array of React elements representing the individual buttons within the group | ++ |
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| className | +string | +Optional name for additional styling | ++ |
| Icon | +`React.ComponentType` | +An optional icon component that's displayed within the button | ++ |
| size | +string | +The size of the button. Has two options: `small` and `medium` | +small | +
| position | +string | +The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle` | +standalone | +
| applyShadow | +boolean | +Determines whether to apply shadow to a button | +`true` | +
| applyBlur | +boolean | +Determines whether to apply a blur effect to the button | +`true` | +
| disabled | +boolean | +Determines whether the button is disabled | +`false` | +
| focus | +boolean | +Indicates if the button has focus | +`false` | +
| onClick | +function | +A callback function that triggers when the user clicks on the button | ++ |
| isActive | +boolean | +Determines if the button is in an active state | ++ |
| Props | +Type | +Description | +
|---|---|---|
| className | +string | +Optional name for additional styling | +
| size | +string | +The size of the button. Has two options: `small` and `medium` | +
| iconButtons | +array | +An array of objects, each representing an icon button in the group. Each object should include the icon component you want to display in the button, the function you want to call when a user clicks on the button, and whether the button should be active or not. | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| className | +string | +Optional name for additional styling | ++ |
| icon | +`React.ReactNode` | +The icon you want to display in the button | ++ |
| title | +string | +The text content of the button | ++ |
| accent | +string | +The accent color of the button. Options include: `secondary` and `tertiary` | +secondary | +
| active | +boolean | +Determines if the button is in an active state | +`false` | +
| disabled | +boolean | +Determines whether the button is disabled | +`false` | +
| focus | +boolean | +Indicates if the button has focus | +`false` | +
| onClick | +function | +A callback function that triggers when the user clicks on the button | ++ |
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| className | +string | +Optional name for additional styling | ++ |
| testId | +string | +Test identifier for the button | ++ |
| Icon | +`React.ComponentType` | +An optional icon component that's displayed within the button | ++ |
| title | +string | +The text content of the button | ++ |
| size | +string | +The size of the button. Has two options: `small` and `medium` | +small | +
| accent | +string | +The accent color of the button. Options include: `secondary` and `tertiary` | +secondary | +
| active | +boolean | +Determines if the button is in an active state | +`false` | +
| disabled | +boolean | +Determines whether the button is disabled | +`false` | +
| focus | +boolean | +Indicates if the button has focus | +`false` | +
| onClick | +function | +A callback function that triggers when the user clicks on the button | ++ |
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| title | +string | +The text content of the button | ++ |
| fullWidth | +boolean | +efines whether the button should span the whole width of its container | +`false` | +
| variant | +string | +The visual style variant of the button. Options include `primary` and `secondary` | +primary | +
| soon | +boolean | +Indicates if the button is marked as "soon" (such as for upcoming features) | +`false` | +
| Icon | +`React.ComponentType` | +An optional icon component that's displayed within the button | ++ |
| React `button` props | +`React.ComponentProps<'button'>` | +Additional props from React's `button` element | ++ |
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| Icon | +`React.ComponentType` | +An optional icon component that's displayed within the button | ++ |
| React `button` props | +`React.ButtonHTMLAttributes |
+ Additional props from React's `button` element | ++ |
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| checked | +boolean | +Indicates whether the checkbox is checked | ++ |
| indeterminate | +boolean | +Indicates whether the checkbox is in an indeterminate state (neither checked nor unchecked) | ++ |
| onChange | +function | +The callback function you want to trigger when the checkbox state changes | ++ |
| onCheckedChange | +function | +The callback function you want to trigger when the `checked` state changes | ++ |
| variant | +string | +The visual style variant of the box. Options include: `primary`, `secondary`, and `tertiary` | +primary | +
| size | +string | +The size of the checkbox. Has two options: `small` and `large` | +small | +
| shape | +string | +The shape of the checkbox. Has two options: `squared` and `rounded` | +squared | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| variant | +string | +The color scheme variant. Options include `dark`, `light`, and `system` | +light | +
| selected | +boolean | +If `true`, displays a checkmark to indicate the selected color scheme | +|
| additional props | +`React.ComponentPropsWithoutRef<'div'>` | +Standard HTML `div` element props | +
| Props | +Type | +Description | +
|---|---|---|
| value | +`Color Scheme` | +The currently selected color scheme | +
| onChange | +function | +The callback function you want to trigger when a user selects a color scheme | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| disabled | +boolean | +Disables the icon picker if set to `true` | ++ |
| onChange | +function | +The callback function triggered when the user selects an icon. It receives an object with `iconKey` and `Icon` properties | ++ |
| selectedIconKey | +string | +The key of the initially selected icon | ++ |
| onClickOutside | +function | +Callback function triggered when the user clicks outside the dropdown | ++ |
| onClose | +function | +Callback function triggered when the dropdown is closed | ++ |
| onOpen | +function | +Callback function triggered when the dropdown is opened | ++ |
| variant | +string | +The visual style variant of the clickable icon. Options include: `primary`, `secondary`, and `tertiary` | +secondary | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| picture | +string | +The image source URL | ++ |
| onUpload | +function | +The function called when a user uploads a new image. It receives the `File` object as a parameter | ++ |
| onRemove | +function | +The function called when the user clicks on the remove button | ++ |
| onAbort | +function | +The function called when a user clicks on the abort button during image upload | ++ |
| isUploading | +boolean | +Indicates whether an image is currently being uploaded | +`false` | +
| errorMessage | +string | +An optional error message to display below the image input | ++ |
| disabled | +boolean | +If `true`, the entire input is disabled, and the buttons are not clickable | +`false` | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| style | +`React.CSS` properties | +Additional inline styles for the component | ++ |
| className | +string | +Optional CSS class for additional styling | ++ |
| checked | +boolean | +Indicates whether the radio button is checked | ++ |
| value | +string | +The label or text associated with the radio button | ++ |
| onChange | +function | +The function called when the selected radio button is changed | ++ |
| onCheckedChange | +function | +The function called when the `checked` state of the radio button changes | ++ |
| size | +string | +The size of the radio button. Options include: `large` and `small` | +small | +
| disabled | +boolean | +If `true`, the radio button is disabled and not clickable | +false | +
| labelPosition | +string | +The position of the label text relative to the radio button. Has two options: `left` and `right` | +right | +
| Props | +Type | +Description | +
|---|---|---|
| value | +string | +The value of the currently selected radio button | +
| onChange | +function | +The callback function triggered when the radio button is changed | +
| onValueChange | +function | +The callback function triggered when the selected value in the group changes. | +
| children | +`React.ReactNode` | +Allows you to pass React components (such as Radio) as children to the Radio Group | +
| Props | +Type | +Description | +Default | +
|---|---|---|---|
| onValidate | +function | +The callback function you want to trigger when the user validates the input | ++ |
| minRows | +number | +The minimum number of rows for the text area | +1 | +
| placeholder | +string | +The placeholder text you want to display when the text area is empty | ++ |
| onFocus | +function | +The callback function you want to trigger when the text area gains focus | ++ |
| variant | +string | +The variant of the input. Options include: `default`, `icon`, and `button` | +default | +
| buttonTitle | +string | +The title for the button (only applicable for the button variant) | ++ |
| value | +string | +The initial value for the text area | +Empty string | +
| Props | +Type | +Description | +
|---|---|---|
| firstValue | +string | +The value for the first text input | +
| secondValue | +string | +The value for the second text input | +
| firstValuePlaceholder | +string | +Placeholder text for the first text input, displayed when the input is empty | +
| secondValuePlaceholder | +string | +Placeholder text for the second text input, displayed when the input is empty | +
| onChange | +function | +The callback function you want to trigger when the text input changes | +
+ Customer Insights +
+