Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

Bubble

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

Basic Usage

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>

    </>

  );

}

Disabled variant

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>

  );

}

Expandable

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

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>

    </>

  );

}

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 NameParagon VersionInstance Count
frontend-app-admin-portal20.26.31
frontend-app-learner-portal-enterprise20.36.03
Leave feedback

Contents

All components (A-Z)