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.
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
import React from 'react' import { CircleIconButton } from '../..' const CircleIconButtonClick = (props) => ( <div> <CircleIconButton icon="plus" onClick={() => alert('Click!')} variant="primary" {...props} /> </div> ) export default CircleIconButtonClick
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
Never use more than one primary button on a page at any given time.