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.

See this kit in action in our sample UI

Default

Code Example

import React from 'react'

import CircleIconButton from '../_circle_icon_button'

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

    <br />

    <CircleIconButton
        icon="pen"
        variant="secondary"
        {...props}
    />

    <br />

    <CircleIconButton
        disabled
        icon="times"
        {...props}
    />

    <br />

    <CircleIconButton
        icon="user"
        variant="link"
        {...props}
    />
  </div>
)

export default CircleIconButtonDefault

Click Handler

Code Example

import React from 'react'
import { CircleIconButton } from '../..'

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

export default CircleIconButtonClick

Link

Code Example

import React from 'react'

import CircleIconButton from '../_circle_icon_button'

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

    <br />

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

  </div>
)

export default CircleIconButtonLink

Circle Icon Button

See this kit in action in our sample UI

Things to Avoid

UI Samples using Circle Icon Button Kit

Crm Client List