Search...

Circle Icon Button

When using Icon Circle Button, the icon must be clear a clear indication of what the button does because there is no text. Icon Circle Buttons take up less space on the page compared to normal buttons. The link variant is used for times you only want to have an icon for a button without having a background.

Summary

Uses Icons

Default

import React from 'react'

import { CircleIconButton } from 'playbook-ui'

const CircleIconButtonDefault = (props) => (
  <div>
    <CircleIconButton
        icon="plus"
        variant="primary"
    />

    <br />

    <CircleIconButton
        icon="pen"
        variant="secondary"
    />

    <br />

    <CircleIconButton
        disabled
        icon="times"
    />

    <br />

    <CircleIconButton
        icon="user"
        variant="link"
    />
  </div>
)

export default CircleIconButtonDefault

Click Handler

import React from 'react'

import { CircleIconButton } from 'playbook-ui'

const CircleIconButtonClick = (props) => (
  <div>
    <CircleIconButton
        icon="plus"
        onClick={() => alert('Click!')}
        variant="primary"
    />
  </div>
)

export default CircleIconButtonClick

Link

The link prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the newWindow prop (boolean), which will open the link in a new window, or by calling the target prop, which accepts _self, _blank, _parent, _top, child, or any string, allowing you to specify any link target.

import React from 'react'

import { CircleIconButton } from 'playbook-ui'

const CircleIconButtonLink = (props) => (
  <div>
    <CircleIconButton
        icon="search"
        link="https://google.com"
        variant="primary"
    />

    <br />

    <CircleIconButton
        icon="window"
        link="https://google.com"
        newWindow
        variant="secondary"
    />

    <br/>

    <CircleIconButton
        aria={{ label: "Link to Playbook in new window" }}
        icon="info"
        link="https://playbook.powerapp.cloud/"
        target="child"
        variant="secondary"
    />
  </div>
)

export default CircleIconButtonLink

import React from 'react'

import { CircleIconButton } from 'playbook-ui'

const CircleIconButtonLoading = (props) => (
  <div>
    <CircleIconButton
        icon="plus"
        loading
        variant="primary"
    />

    <br />

    <CircleIconButton
        icon="pen"
        loading
        variant="secondary"
    />

    <br />

    <CircleIconButton
        disabled
        icon="times"
        loading
    />

    <br />

    <CircleIconButton
        icon="user"
        loading
        variant="link"
    />
  </div>
)

export default CircleIconButtonLoading

Size

The size prop accepts "sm" as a value to make the Circle Icon Button 20px x 20px instead of the default 40px x 40px size.

import React from 'react'

import { CircleIconButton, Flex } from 'playbook-ui'

const CircleIconButtonSize = (props) => (
  <>
    <Flex gap="sm"
        orientation="column"
    >
        <CircleIconButton
            icon="plus"
            size="sm"
            variant="primary"
        />
        <CircleIconButton
            icon="pen"
            loading
            size="sm"
            variant="secondary"
        />
        <CircleIconButton
            disabled
            icon="times"
            size="sm"
        />
        <CircleIconButton
            icon="info"
            link="https://playbook.powerapp.cloud/"
            size="sm"
            target="child"
            variant="link"
        />
    </Flex>
  </>
)

export default CircleIconButtonSize

Things to Avoid

Never use more than one primary button on a page at any given time.

Available Props

Props	Type	Values
data	object	{ [key: string]: string; }
disabled	enum	true
icon	string
link	string
loading	enum	true
onClick	MouseEventHandler<HTMLElement>	MouseEventHandler<HTMLElement>
newWindow	enum	true
type	enum	"button" \| "submit" \| "reset"
target	string
variant	enum	"primary" \| "secondary" \| "link"
size	enum	"sm"

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.