IconButton

IconButtons are buttons that only consists of an icon. They are useful for actions on places where space is rare and an icon on it's own is really descriptive.

Import

// Tree shakable import
import { IconButton } from '@bojagi/pablo';
// Or direct import
import { IconButton } from '@bojagi/pablo/IconButton';

Examples

Sized IconButton

You can display IconButtons in different sizes. By default they have the size medium. They can also be small and large.

Live Editor

<Flex gap={1}>
  <IconButton onClick="You clicked me!">
    <Trash2 />
  </IconButton>
  <IconButton size="small" onClick="You clicked me!">
    <Trash2 />
  </IconButton>
  <IconButton size="large" onClick="You clicked me!">
    <Trash2 />
  </IconButton>
</Flex>

Result

Loading...

Active Icon buttons

IconButtons can also be used to toggle certain functionality (e.g. bold text mode in rich text inputs). For this you can use the boolean active prop.

Live Editor

() => {
  const [active, setActive] = React.useState(props.active);
  return (
    <IconButton active={active} onClick={() => setActive(!active)}>
      <Italic />
    </IconButton>
  );;
}

Result

Loading...

Colored IconButton

To give IconButtons a different color, just use the color prop. Colors can be brand, plain, negative or positive. The default color is plain.

Live Editor

() => {
  const [active, setActive] = React.useState(props.active);
  return (
    <Flex gap={1}>
      <IconButton color="brand" active={active} onClick={() => setActive(!active)}>
        <Crop />
      </IconButton>
      <IconButton color="positive" active={active} onClick={() => setActive(!active)}>
        <CheckCircle />
      </IconButton>
      <IconButton color="negative" active={active} onClick={() => setActive(!active)}>
        <Trash2 />
      </IconButton>
    </Flex>
  );
}

Result

Loading...

Props

Name	Type	Default Value	Required	Description

Box props

Name	Type	Default Value	Required	Description