Design System

Button

Solid tones

Solid buttons are high-emphasis actions. Brand is the default and primary call-to-action. Neutral and critical are used for secondary and destructive actions respectively.

1
<Inline
2
    space="small"
3
    alignY="center">
4
    <Button tone="brand">Brand</Button>
5
    <Button tone="neutral">Neutral</Button>
6
    <Button tone="critical">Critical</Button>
7
</Inline>

Soft tones

Soft buttons are lower-emphasis alternatives. They use a tinted background and matching text tone without a solid fill, making them suitable alongside solid buttons or in contexts where a strong call-to-action would be too prominent.

1
<Inline
2
    space="small"
3
    alignY="center">
4
    <Button
5
        variant="soft"
6
        tone="neutral">
7
        Neutral
8
    </Button>
9
    <Button
10
        variant="soft"
11
        tone="critical">
12
        Critical
13
    </Button>
14
    <Button
15
        variant="soft"
16
        tone="caution">
17
        Caution
18
    </Button>
19
    <Button
20
        variant="soft"
21
        tone="positive">
22
        Positive
23
    </Button>
24
    <Button
25
        variant="soft"
26
        tone="info">
27
        Info
28
    </Button>
29
    <Button
30
        variant="soft"
31
        tone="promote">
32
        Promote
33
    </Button>
34
</Inline>

Sizes

Standard is the default. Small is for compact contexts such as toolbars or inline actions.

1
<Inline
2
    space="small"
3
    alignY="center">
4
    <Button size="standard">Standard</Button>
5
    <Button size="small">Small</Button>
6
</Inline>

Disabled

Disabled buttons are visually dimmed and non-interactive. Both variants support the disabled state.

1
<Inline
2
    space="small"
3
    alignY="center">
4
    <Button disabled>Disabled</Button>
5
    <Button
6
        variant="soft"
7
        disabled>
8
        Disabled
9
    </Button>
10
</Inline>

Invoker commands

The commandFor and command props wire a button to any dialog or popover by ID using the HTML Invoker Commands API, with no JavaScript required. Here a button opens the MobileNavigation dialog by targeting its ID.

1
<Button
2
    commandFor="demo-nav"
3
    command="show-modal">
4
    Open menu
5
</Button>
6

7
<MobileNavigation
8
    id="demo-nav"
9
    title="Lloyd Atkinson"
10
    links={[
11
        { title: 'Articles', to: '/articles/' },
12
        { title: 'Notes', to: '/notes/' },
13
        { title: 'Speaking', to: '/speaking/' },
14
        { title: 'About', to: '/about/' },
15
    ]}
16
    iconLinks={[
17
        { title: 'Read', to: '/reading/', icon: 'books' },
18
        { title: 'RSS Feed', to: '/rss.xml', icon: 'rss' },
19
        { title: 'Contact', to: '/inbox/', icon: 'envelope' },
20
    ]}
21
/>