Tip
A tip is a short, optional hint, like a keyboard shortcut or a pointer to more help, centered below the content it belongs to.
A tip is a single line of help that people can safely ignore. It starts with a lightbulb icon and the word Tip!, followed by the hint in a lighter color. You find tips at the bottom of the Settings page, at the bottom of the search dialog, and in the dialog to create a new automation, where a tip points to where you can find more blueprints.
It needs the translations of Home Assistant to show its prefix, so there is no live demo here.
Use a tip for:
- A shortcut that makes something faster, like a keyboard shortcut
- A pointer to more help or more content, like the community or the blueprint exchange
Don't use a tip for:
- Something people need to know to finish the task. Put it in the text, or use an alert.
- A warning or an error. Use an alert.
- A hint about one field. Use the helper text of the field.
- Icon: a lightbulb
- Prefix: the word Tip!, in a medium weight, translated
- Text: the hint, in the secondary text color. It can contain a link or a button.
The whole tip is centered.
There is one tip. What changes is the content: plain text, or text with a link or a button in it.
On the Settings page, the frontend picks a random tip each time. Tips about keyboard shortcuts are left out on narrow screens.
A tip does nothing by itself. A link or a button inside it works as usual.
| Property | Value | Token |
|---|---|---|
| Alignment | Centered | None |
| Prefix weight | 500 | --ha-font-weight-medium |
| Text color | Secondary text color | --secondary-text-color |
| Space between prefix and text | 2px | None |
The icon has the default icon size of 24px (--mdc-icon-size). The text follows the size of the surrounding text.
- Put it at the end of the content, where it doesn't get in the way. That is where the frontend puts its tips: below the cards on the Settings page, in the footer of the search dialog, and below the list of blueprints.
A tip has no keyboard behavior of its own. A link or button inside it is in the tab order, like anywhere else.
Screen readers read the prefix and the text, as regular text. The icon is decorative.
The tip has no role. The icon is an ha-svg-icon. Write the text so it reads well after "Tip!".
- Alert: for information that people need
- Tooltip: a short hint on hover or focus
- UI text: how to write the hint
The element is <ha-tip>. Put the hint in its default slot:
<ha-tip>
<a href="..." target="_blank" rel="noreferrer">Discover more blueprints</a>
</ha-tip>The prefix comes from the translation key ui.panel.config.tips.tip.
- Default: the text of the tip.
Source: src/components/ha-tip.ts