Bubble

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

Basic Usage

Disabled variant

Expandable

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

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 Required

    Specifies contents of the component.

  • 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