Design System

Button

Solid tones

Solid is the default variant. Brand is the primary call to action; neutral and critical cover secondary and destructive actions.

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

Replaces the solid fill with a tinted background and matching text color, for lower emphasis. Available in neutral, critical, caution, positive, info, and promote tones.

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 size. small suits 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

Dims the button and removes all interactivity. Both the solid and soft variants support this 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

command and commandFor wire a button to any dialog or popover by element ID, using the native HTML Invoker Commands API. No JavaScript required.

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
/>