button-icon

import { ButtonIcon } from "woly";

ButtonIcon is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text. Considering that a text label is not used, an icon should be present to signify what the button does.

Also, icons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite.

Example

<Playground>
  <ButtonIcon
    icon={<IconSearch />}
    onClick={() => console.info('ButtonIcon clicked')}
    priority="default"
    weight="fill"
  />
  <ButtonIcon
    icon={<IconSearch />}
    onClick={() => console.info('ButtonIcon clicked')}
    priority="default"
    weight="outline"
  />
  <ButtonIcon
    icon={<IconSearch />}
    onClick={() => console.info('ButtonIcon clicked')}
    priority="default"
    weight="transparent"
  />
</Playground>

Sizes

Button-icon's size can controlled by block-container and it`s width is equal to container size.

<Playground>
  <block.N>
    <ButtonIcon
      icon={<IconSearch />}
      onClick={() => console.info('ButtonIcon clicked')}
      priority="default"
      weight="fill"
    />
  </block.N>
  <block.XS>
    <ButtonIcon
      icon={<IconEyeOpened />}
      onClick={() => console.info('ButtonIcon clicked')}
      priority="primary"
      weight="fill"
    />
  </block.XS>
  <block.S>
    <ButtonIcon
      icon={<IconSearch />}
      onClick={() => console.info('ButtonIcon clicked')}
      priority="secondary"
      weight="fill"
    />
  </block.S>
  <block.M>
    <ButtonIcon
      icon={<IconEyeOpened />}
      onClick={() => console.info('ButtonIcon clicked')}
      priority="primary"
      disabled
      weight="fill"
    />
  </block.M>
</Playground>

Weight and priority

Button-icon can be represented in primary, secondary or default priorities and can be styled by changing icon`s weight: fill, outline, transparent. In case of choosing button-icon in black-and-white priority with outline styles use the opposite background color to the text color of button-icon.

<Playground>
  <block.L
    style={{
      display: 'flex',
      justifyContent: 'space-between',
      padding: '24px',
      width: '900px',
    }}
  >
    <ButtonIcon
      icon={<IconSearch />}
      onClick={() => console.info('ButtonIcon clicked')}
      priority="primary"
      weight="fill"
    />
    <ButtonIcon
      icon={<IconSearch />}
      onClick={() => console.info('ButtonIcon clicked')}
      priority="primary"
      weight="outline"
    />
    <ButtonIcon
      icon={<IconSearch />}
      onClick={() => console.info('ButtonIcon clicked')}
      priority="primary"
      weight="transparent"
    />
    <ButtonIcon
      icon={<IconSearch />}
      onClick={() => console.info('ButtonIcon clicked')}
      priority="secondary"
      weight="fill"
    />
    <ButtonIcon
      icon={<IconSearch />}
      onClick={() => console.info('ButtonIcon clicked')}
      priority="secondary"
      weight="outline"
    />
    <ButtonIcon
      icon={<IconSearch />}
      onClick={() => console.info('ButtonIcon clicked')}
      priority="secondary"
      weight="transparent"
    />
    <ButtonIcon
      icon={<IconSearch />}
      onClick={() => console.info('ButtonIcon clicked')}
      priority="default"
      weight="fill"
    />
    <ButtonIcon
      icon={<IconSearch />}
      onClick={() => console.info('ButtonIcon clicked')}
      priority="default"
      weight="outline"
    />
    <ButtonIcon
      icon={<IconSearch />}
      onClick={() => console.info('ButtonIcon clicked')}
      priority="default"
      weight="transparent"
    />
    <ButtonIcon
      icon={<IconSearch />}
      onClick={() => console.info('ButtonIcon clicked')}
      weight="goast"
      priority="white"
    />
  </block.L>
</Playground>

Props

NameTypeDefaultDescription
iconReact.ReactNodenullSet the icon component inside the button
onClickReact.MouseEventHandler<HTMLButtonElement>Callback when button clicked
prioritystring'secondary'Priority prop to style ButtonIcon component
weightstringfillSet button-icon`s weight (ex.: fill, outline, transparent)
...HTMLButtonElement{}Other props are inherited from HTMLButtonElement