Theme

npm_versionnpm Paragon package page

Display informative text related to an object on screen. Unlike the tooltip an annotation is not interactive.

  • Don't put links or interactive elements in annotations - use Popover instead
  • Don’t use annotations if trigger is needed - use Tooltips instead

Basic Usage

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

Referring to other elements

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

Theme Variables (SCSS)#

$annotation-padding: .5rem !default;
$annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
$annotation-border-radius: .25rem !default;
$annotation-max-width: 18.75rem !default;
$annotation-font-size: $font-size-sm !default;
$annotation-line-height: $line-height-sm !default;
$annotation-variants: (
"success": ( "background-color": $success, "color": $white ),
"warning": ( "background-color": $accent-b, "color": $black ),
"error": ( "background-color": $danger, "color": $white ),
"light": ( "background-color": $white, "color": $primary-500 ),
"dark": ( "background-color": $dark, "color": $white ),
) !default;
$annotation-arrow-side-margin: .25rem !default;
$annotation-arrow-border-width: .5rem !default;

Props API#

Annotation Props API
  • children node Required

    Specifies contents of the component.

  • className string

    Specifies class name to append to the base element.

  • variant enum'error' | 'success' | 'warning' | 'light' | 'dark'

    Specifies variant to use.

    Default'success'
  • arrowPlacement enum'top' | 'right' | 'bottom' | 'left'

    Specifies arrow position.

    Default'bottom'