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

<%= pb_rails("circle_icon_button", props: {
  variant: "primary",
  icon: "plus"
}) %>

<br/>

<%= pb_rails("circle_icon_button", props: {
  variant: "secondary",
  icon: "pen"
}) %>

<br/>

<%= pb_rails("circle_icon_button", props: {
  disabled: true,
  icon: "times"
}) %>

<br/>

<%= pb_rails("circle_icon_button", props: {
  variant: "link",
  icon: "user"
}) %>

Link

Code Example

<%= pb_rails("circle_icon_button", props: {
  variant: "primary",
  icon: "search",
  link: "https://google.com"
}) %>
<br/>
<%= pb_rails("circle_icon_button", props: {
  variant: "secondary",
  icon: "window",
  link: "https://google.com",
  new_window: true
}) %>

Things to Avoid

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

UI Samples using Circle Icon Button Kit

Get the full picture. See how this kit is used in our samples.

Crm Client List

Available Props

classname
dark
margin
margin_bottom
margin_left
margin_right
margin_top
margin_x
margin_y
max_width
padding
padding_bottom
padding_left
padding_right
padding_top
padding_x
padding_y
z_index
number_spacing
shadow
line_height
display
cursor
flex_direction
flex_wrap
justify_content
justify_self
align_items
align_content
align_self
flex
flex_grow
flex_shrink
order
id
data
aria
children
type
variant
disabled
icon
link
new_window