Theme

npm_versionnpm Paragon package page

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.

Disabled variant

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

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.

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.46.31
frontend-app-course-authoring21.5.62
frontend-app-learner-portal-enterprise20.45.44
frontend-component-header-edx21.5.61