Tabs

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

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.

Buttons

One way to implement tabs is with buttons. Use the "Primary" style to identify the selected tab and the "Link" style for non-selected tabs.

Example Expression

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  a!buttonLayout(
    secondaryButtons: {
      a!buttonWidget(
        label: "Summary",
        size: "SMALL",
        style: "PRIMARY"
      ),
      a!buttonWidget(
        label: "News",
        size: "SMALL",
        style: "LINK"
      ),
      a!buttonWidget(
        label: "Related Actions",
        size: "SMALL",
        style: "LINK"
      )
    }
  )
}

You can also design tabs using rich text. Use a bold, non-linked label for the selected tab and links for the non-selected tabs. To separate the tabs, use a combination of spaces and separators.

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
{
  a!richTextDisplayField(
    value: {
      a!richTextItem(
        text: "Summary",
        style: "STRONG"
      ),
      a!richTextItem(
        text: "    |    "
      ),
      a!richTextItem(
        text: "News",
        link: a!dynamicLink(),
        linkStyle: "STANDALONE"
      ),
      a!richTextItem(
        text: "    |    "
      ),
      a!richTextItem(
        text: "Related Actions",
        link: a!dynamicLink(),
        linkStyle: "STANDALONE"
      )
    }
  )
}

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