IconButton

A clickable element that triggers actions, such as form submission or navigation. Similar to Button except it renders only an Icon inside a square component.

Primary IconButton

For the main action the user should take. Generative or forward progressing.

Example: Primary IconButton

  import { IconButton, Icon, Size } from '@skiff-org/skiff-ui';

  <IconButton filled onClick={onClick} icon={Icon.FilePlus} size={Size.LARGE} />
  <IconButton filled onClick={onClick} icon={Icon.FilePlus} size={Size.MEDIUM} />
  <IconButton filled onClick={onClick} icon={Icon.FilePlus} size={Size.SMALL} />

Secondary IconButton

For supporting or inverse actions.

Example: Secondary IconButton

  import { IconButton, Icon, Size } from '@skiff-org/skiff-ui';

  <IconButton filled onClick={onClick} icon={Icon.FilePlus} size={Size.LARGE} type={Type.SECONDARY} />
  <IconButton filled onClick={onClick} icon={Icon.FilePlus} size={Size.MEDIUM} type={Type.SECONDARY} />
  <IconButton filled onClick={onClick} icon={Icon.FilePlus} size={Size.SMALL} type={Type.SECONDARY} />

Tertiary IconButton

For tertiary supporting actions.

Example: Secondary IconButton

  import { IconButton, Icon, Size } from '@skiff-org/skiff-ui';

  <IconButton filled onClick={onClick} icon={Icon.FilePlus} size={Size.LARGE} type={Type.TERTIARY} />
  <IconButton filled onClick={onClick} icon={Icon.FilePlus} size={Size.MEDIUM} type={Type.TERTIARY} />
  <IconButton filled onClick={onClick} icon={Icon.FilePlus} size={Size.SMALL} type={Type.TERTIARY} />

Destructive IconButton

For serious negative actions.

Example: Secondary IconButton

  import { IconButton, Icon, Size } from '@skiff-org/skiff-ui';

  <IconButton filled onClick={onClick} icon={Icon.FilePlus} size={Size.LARGE} type={Type.DESTRUCTIVE} />
  <IconButton filled onClick={onClick} icon={Icon.FilePlus} size={Size.MEDIUM} type={Type.DESTRUCTIVE} />
  <IconButton filled onClick={onClick} icon={Icon.FilePlus} size={Size.SMALL} type={Type.DESTRUCTIVE} />

Properties

  • Name
    disabled
    Type
    boolean
    Description

    Set the IconButton to a disabled, unclickable state.

  • Name
    forceTheme
    Type
    ThemeMode
    Description

    Force the theme (dark or light mode) of the IconButton, regardless of app theme.

  • Name
    iconColor
    Type
    Color
    Description

    Override the color of the icon

  • Name
    size
    Type
    Size
    Description

    The size for the IconButton.

  • Name
    onClick
    Type
    (e: React.MouseEvent) => void | Promise<void>
    Description

    Call function when the IconButton is clicked.