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

Referring to other elements

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;
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.

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

    Specifies arrow position.