Bubble

Represents the filled circle with a number of an icon, supporting the usual color variants

Basic Usage

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  return (
    <>
      <Stack direction="horizontal" gap={4} className="mb-2">
        <Bubble>
          1
        </Bubble>
        <Bubble variant="error">
          1
        </Bubble>
        <Bubble variant="warning">
          1
        </Bubble>
        <Bubble variant="success">
          1
        </Bubble>
      </Stack>
      <Stack direction="horizontal" gap={4} className="mb-2">
        <Bubble>
          <Icon src={Check} />
        </Bubble>
        <Bubble variant="error">
          <Icon src={Check} />
        </Bubble>
        <Bubble variant="warning">
          <Icon src={Check} />
        </Bubble>
        <Bubble variant="success">
          <Icon src={Check} />
        </Bubble>
      </Stack>
    </>
  );
}

() => {
  return (
    <>
      <Stack direction="horizontal" gap={4} className="mb-2">
        <Bubble>
          1
        </Bubble>
        <Bubble variant="error">
          1
        </Bubble>
        <Bubble variant="warning">
          1
        </Bubble>
        <Bubble variant="success">
          1
        </Bubble>
      </Stack>
      <Stack direction="horizontal" gap={4} className="mb-2">
        <Bubble>
          <Icon src={Check} />
        </Bubble>
        <Bubble variant="error">
          <Icon src={Check} />
        </Bubble>
        <Bubble variant="warning">
          <Icon src={Check} />
        </Bubble>
        <Bubble variant="success">
          <Icon src={Check} />
        </Bubble>
      </Stack>
    </>
  );
}

Disabled variant

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  return (
    <Stack direction="horizontal" gap={4} className="mb-2">
      <Bubble disabled>
        1
      </Bubble>
      <Bubble disabled>
        <Icon src={Check} />
      </Bubble>
    </Stack>
  );
}

() => {
  return (
    <Stack direction="horizontal" gap={4} className="mb-2">
      <Bubble disabled>
        1
      </Bubble>
      <Bubble disabled>
        <Icon src={Check} />
      </Bubble>
    </Stack>
  );
}

Expandable

In the case of long content use expandable prop. It adds padding to Bubble. Padding value is configurable through scss variables.

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  {/* start example state */}
  const [isExpandable, setIsExpandable] = useState(true);
  {/* end example state */}

  return (
    <>
      {/* start example form block */}
      <ExamplePropsForm
        inputs={[
          { value: isExpandable, setValue: () => setIsExpandable(!isExpandable), name: 'isExpandable' },
        ]}
      />
      {/* end example form block */}
      <Bubble variant="error" expandable={isExpandable}>
        1234
      </Bubble>
    </>
  );
}

() => {
  {/* start example state */}
  const [isExpandable, setIsExpandable] = useState(true);
  {/* end example state */}

  return (
    <>
      {/* start example form block */}
      <ExamplePropsForm
        inputs={[
          { value: isExpandable, setValue: () => setIsExpandable(!isExpandable), name: 'isExpandable' },
        ]}
      />
      {/* end example form block */}
      <Bubble variant="error" expandable={isExpandable}>
        1234
      </Bubble>
    </>
  );
}

Theme Variables (SCSS)#

$bubble-variants:  (
  "success":    ( "background-color": $success, "color": $white ),
  "warning":    ( "background-color": $warning, "color": $white ),
  "error":      ( "background-color": $danger, "color": $white ),
  "primary":    ( "background-color": $primary, "color": $white ),
) !default;
$bubble-expandable-padding-x:               .25rem !default;
$bubble-expandable-padding-y:               0 !default;

Props API#

Bubble Props API

children node
Specifies contents of the component.
Defaultnull
variant enum'primary' | 'success' | 'error' | 'warning'
The Bubble style variant to use.
Default'primary'
disabled bool
Activates disabled variant.
Defaultfalse
className string
A class name to append to the base element.
expandable bool
Specifies whether to add padding to the Bubble or not.
Defaultfalse

Usage Insights#

Bubble

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	21.13.1	1
frontend-app-course-authoring	22.8.1	3
frontend-app-learner-portal-enterprise	21.13.1	4
frontend-component-header-edx	21.13.1	1

Edit this page Leave feedback

Paragon Design System

Theme

Bubble

Basic Usage

Disabled variant

Expandable

Theme Variables (SCSS)#

Props API#

Usage Insights#

Bubble

All components (A-Z)

Theme

Bubble

Basic Usage#

Disabled variant#

Expandable#

Theme Variables (SCSS)#

Props API#

Usage Insights#

Bubble

All components (A-Z)

Basic Usage

Disabled variant

Expandable