TextBubble

Description

Text in a bubble.

See live demos on storybook

Storybook TextBubble Demos

Install from Artifactory

• Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
  • Verify your token is correctly set up in your .npmrc as per the link above
• Verify you have the @element scope configured in your .npmrc
  • @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
• Install the component and themes bundles
  • npm i @element/react-components @element/themes
    • alternatively install the component individually along with the themes bundle npm i @element/react-text-bubble @element/themes

Text Bubble Props

| Name | Type | Default | Required | Description | | ---------- | ------------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | bubbleSize | string | 'default' | false | Make the bubble smaller.Accepted Values: default, small | | tag | string|React.ElementType | 'div' | false | Optionally override the default component of div. | | themeColor | string | 'primary' | false | Color of the badge.Accepted Values: primary, secondary, danger, danger-alt, success, muted, blue, gray, green, orange, purple, red, teal, yellow, background | | variant | string | 'filled' | false | The style of the TextBubble.Accepted Values: filled, outlined |

Text Bubble Render Props

| Name | Type | Default | Required | Description | | ---- | --------------- | ------- | -------- | --------------------------------------------- | | text | React.ReactNode | null | false | Content for the bubble, should be 1 character |