Button help is a small interactive element allowing you to provide help or extra information to the user by showing a tooltip.
Overview
A typical use case: its combination with
label
in forms, giving help to the user about the question you're asking him.
Usage
Dependencies
To get the button help component working, include the dependencies in your project in the following order:
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"
@import 'design-system/src/scss/01-atoms/icon';
@import 'design-system/src/scss/01-atoms/btn-help';
@import 'design-system/src/scss/01-atoms/tooltip';
include /node_modules/design-system/src/pug/01-atoms/btn-help
import Tooltips from 'design-system/src/js/01-atoms/tooltip';
Basic code
A button help is composed by an
a
with an attribute
title
that serves as the text for the tooltip. Inside this link we found 2 icons used for a small animation.
<a class="btn-help btn-help--md btn-help--secondary" title="Help text" tabindex="0" role="button" aria-label="Help" data-toggle="tooltip">
<svg class="icon btn-help__icon" aria-hidden="true">
<use xlink:href="/img/sprite.svg#icon-circle-info-outlined" />
</svg>
<svg class="icon btn-help__icon" aria-hidden="true">
<use xlink:href="/img/sprite.svg#icon-circle-info-filled" />
</svg>
</a>
a(class='btn-help btn-help--md btn--help--secondary' title='Help text' tabindex='0' role='button' aria-label='help' data-toggle='tooltip')
+icon('circle-info-outlined')(class='btn-help__icon')
+icon('circle-info-filled')(class='btn-help__icon')
Tooltips();
Pug mixin
We created a pug mixin to implement the button help with ease, find the parameters below:
+btn-help(color, size, position, text, link, title, ariaLabel, svgUrl)
| # | Name | Type | Default | Required | Description |
|---|---|---|---|---|---|
| 1 | color |
String |
secondary |
No | Set the color of the button help. |
| 2 | size |
String |
md |
No | Choose between
sm
(16px),
md
(24px) and
lg
(32px) sizes.
|
| 3 | position |
String |
/ | No | Should be used when the button help is used inline, it adds margin on the left or the right based on the position. Choose between
left
or
right.
|
| 4 | text |
String |
/ | No | When this parameter is filled, the button help will show the value as a text after the button help. |
| 5 | link |
String |
/ | No | This parameter should be used with the text one, it'll add an
href
attribute to the button help.
|
| 6 | title |
String |
Tooltip text |
Yes | This value is used as the
title
attribute of the button help. It'll be used by the tooltip as content.
|
| 7 | ariaLabel |
String |
Help |
Yes | Set the label for screen readers |
| 8 | svgUrl |
String |
/img/sprite.svg |
No | Specify a custom path for the SVG sprite. |
Modifiers
Add the following modifier to change the appearance of a button help.
Size
Size modifier allows you to change the size of the button help.
<!-- Small -->
<a class="btn-help btn-help--sm" data-toggle="tooltip" role="button" aria-label="Help" tabindex="0">
<!-- Medium -->
<a class="btn-help btn-help--md" data-toggle="tooltip" role="button" aria-label="Help" tabindex="0">
<!-- Large -->
<a class="btn-help btn-help--lg" data-toggle="tooltip" role="button" aria-label="Help" tabindex="0">
//- Small
a(class='btn-help btn-help--sm' title='Help text' tabindex='0' role='button' aria-label='help' data-toggle='tooltip')
//- Medium
a(class='btn-help btn-help--md' title='Help text' tabindex='0' role='button' aria-label='help' data-toggle='tooltip')
//- Large
a(class='btn-help btn-help--lg' title='Help text' tabindex='0' role='button' aria-label='help' data-toggle='tooltip')
Color
7 colors are available based on the main colors of the theme used in your project.
<!-- Primary -->
<a class="btn-help btn-help--primary" data-toggle="tooltip" role="button" aria-label="Help" tabindex="0">
<!-- Secondary -->
<a class="btn-help btn-help--secondary" data-toggle="tooltip" role="button" aria-label="Help" tabindex="0">
<!-- Success -->
<a class="btn-help btn-help--success" data-toggle="tooltip" role="button" aria-label="Help" tabindex="0">
<!-- Warning -->
<a class="btn-help btn-help--warning" data-toggle="tooltip" role="button" aria-label="Help" tabindex="0">
<!-- Danger -->
<a class="btn-help btn-help--danger" data-toggle="tooltip" role="button" aria-label="Help" tabindex="0">
<!-- Grey -->
<a class="btn-help btn-help--grey" data-toggle="tooltip" role="button" aria-label="Help" tabindex="0">
<!-- White -->
<a class="btn-help btn-help--white" data-toggle="tooltip" role="button" aria-label="Help" tabindex="0">
//- Primary
a(class='btn-help btn-help--primary' title='Help text' tabindex='0' role='button' aria-label='help' data-toggle='tooltip')
//- Secondary
a(class='btn-help btn-help--secondary' title='Help text' tabindex='0' role='button' aria-label='help' data-toggle='tooltip')
//- Success
a(class='btn-help btn-help--success' title='Help text' tabindex='0' role='button' aria-label='help' data-toggle='tooltip')
//- Warning
a(class='btn-help btn-help--warning' title='Help text' tabindex='0' role='button' aria-label='help' data-toggle='tooltip')
//- Danger
a(class='btn-help btn-help--danger' title='Help text' tabindex='0' role='button' aria-label='help' data-toggle='tooltip')
//- Grey
a(class='btn-help btn-help--grey' title='Help text' tabindex='0' role='button' aria-label='help' data-toggle='tooltip')
//- White
a(class='btn-help btn-help--white' title='Help text' tabindex='0' role='button' aria-label='help' data-toggle='tooltip')
Position
Position modifier allows you to add left or right
margin
to the button help, it must be used when the button help is inlined.
<!-- Left -->
<a class="btn-help btn-help--left" data-toggle="tooltip" role="button" aria-label="Help" tabindex="0">
<!-- Right -->
<a class="btn-help btn-help--right" data-toggle="tooltip" role="button" aria-label="Help" tabindex="0">
//- Left
a(class='btn-help btn-help--left' title='Help text' tabindex='0' role='button' aria-label='help' data-toggle='tooltip')
//- Right
a(class='btn-help btn-help--right' title='Help text' tabindex='0' role='button' aria-label='help' data-toggle='tooltip')