Tabs with Icons

Use tabs to present different views of the same topic. Tabs should reflect the structured organization of a topic.

Related: Tabs Patterns.

For example, when looking at a page about a customer, there might be tabs for "Projects", "Opportunities", and "Invoices". Users should not see completely different tabs when looking at different customers (though it is acceptable to omit tabs that are not applicable to the context).

DO

DON'T

Don't use tabs for navigating between different items in a list.

Avoid repeating the same words across tabs.

You can also use a rich text icon at the beginning of each tab label to visually separate tabs.

Example Expression

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
  a!richTextDisplayField(
    value: {
      a!richTextIcon(
        icon: "home"
      ),
      a!richTextItem(
        text: " "
      ),
      a!richTextItem(
        text: "Summary",
        style: "STRONG"
      ),
      a!richTextItem(
        text: "        "
      ),
      a!richTextIcon(
        icon: "comments",
        color: "ACCENT"
      ),
      a!richTextItem(
        text: " "
      ),
      a!richTextItem(
        text: "News",
        link: a!dynamicLink(),
        linkStyle: "STANDALONE"
      ),
      a!richTextItem(
        text: "        "
      ),
      a!richTextIcon(
        icon: "flash",
        color: "ACCENT"
      ),
      a!richTextItem(
        text: " "
      ),
      a!richTextItem(
        text: "Related Actions",
        link: a!dynamicLink(),
        linkStyle: "STANDALONE"
      )
    }
  )
}
FEEDBACK