Design System

Button Icon

Soft

The default variant. Keeps a permanent neutralLight background at rest, with hover and active overlays layered on top.

1
<Inline
2
    space="small"
3
    alignY="center">
4
    <ButtonIcon
5
        icon="magnifying-glass"
6
        label="Search"
7
    />
8
    <ButtonIcon
9
        icon="envelope"
10
        label="Contact"
11
    />
12
    <ButtonIcon
13
        icon="rss"
14
        label="RSS feed"
15
    />
16
    <ButtonIcon
17
        icon="books"
18
        label="Reading list"
19
    />
20
</Inline>

Transparent

No background at rest; a circular surface appears only on hover or active. Bleed is applied automatically, so the icon sits flush with surrounding elements while keeping the full touch target.

1
<Inline
2
    space="small"
3
    alignY="center">
4
    <ButtonIcon
5
        icon="list"
6
        label="Open menu"
7
        variant="transparent"
8
    />
9
    <ButtonIcon
10
        icon="close"
11
        label="Close"
12
        variant="transparent"
13
    />
14
    <ButtonIcon
15
        icon="magnifying-glass"
16
        label="Search"
17
        variant="transparent"
18
    />
19
</Inline>

Ghost

No background or hover/active surface, only a press animation that scales the icon down on click. Suits placement next to plain text links.

1
<Inline
2
    space="small"
3
    alignY="center">
4
    <ButtonIcon
5
        icon="magnifying-glass"
6
        label="Search"
7
        variant="ghost"
8
    />
9
    <ButtonIcon
10
        icon="envelope"
11
        label="Contact"
12
        variant="ghost"
13
    />
14
    <ButtonIcon
15
        icon="rss"
16
        label="RSS feed"
17
        variant="ghost"
18
    />
19
</Inline>

Sizes

Three sizes: small (4px padding), standard (8px padding, default), and large (8px padding with a larger icon). The touch target always expands to a minimum of 44×44px via a ::after pseudo-element.

1
<Inline
2
    space="moderate"
3
    alignY="center">
4
    <ButtonIcon
5
        icon="magnifying-glass"
6
        label="Search"
7
        size="small"
8
    />
9
    <ButtonIcon
10
        icon="magnifying-glass"
11
        label="Search"
12
        size="standard"
13
    />
14
    <ButtonIcon
15
        icon="magnifying-glass"
16
        label="Search"
17
        size="large"
18
    />
19
</Inline>

Disabled

Dims the icon and removes interactivity. All three variants support this state.

1
<Inline
2
    space="small"
3
    alignY="center">
4
    <ButtonIcon
5
        icon="magnifying-glass"
6
        label="Search"
7
        disabled
8
    />
9
    <ButtonIcon
10
        icon="magnifying-glass"
11
        label="Search"
12
        variant="transparent"
13
        disabled
14
    />
15
</Inline>

Invoker commands

Accepts the same command and commandFor props as Button, wiring it to a dialog or popover by ID through the Invoker Commands API. The site header uses this with a transparent ButtonIcon that opens MobileNavigation.

1
<ButtonIcon
2
    icon="list"
3
    label="Open navigation menu"
4
    variant="transparent"
5
    commandFor="demo-mobile-navigation"
6
    command="show-modal"
7
/>
8

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