Playbook logo
14.19.0

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
Default





Loading





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.


Things to Avoid

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


Available Props

Props Type Values Default

type

enum
button
submit
reset
button

variant

enum
primary
secondary
link
primary

disabled

boolean
false

icon

string

loading

boolean
false

link

string

new_window

boolean
false

target

string

size

enum
default
sm
default