Bubble

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

Basic Usage

() => {
  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

() => {
  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.

() => {
  {/* 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;

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

Paragon Design System

Bubble

Basic Usage

Disabled variant

Expandable

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Bubble

Basic Usage#

Disabled variant#

Expandable#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage

Disabled variant

Expandable