IconText

A component for displaying Icons combined with Typography text inline.

Overview

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

Static IconText
Interactive IconText

Example: IconText

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

  <IconText label='Static IconText' startIcon={Icon.Bolt} />
  <IconText label='Interactive IconText' startIcon={Icon.Plus} onClick={()=>{}} />

Icon placement

Icons can also be placed at the end of the component.

Static IconText
Interactive IconText

Example: IconText placement

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

  <IconText label='Static IconText' endIcon={Icon.Bolt} />
  <IconText label='Interactive IconText' endIcon={Icon.Plus} onClick={()=>{}} />

Filled state

The filled state adds a visible container to the IconText. This can be used as a badge or compact button.

Static IconText
Interactive IconText

Example: Filled IconText

  import { IconText, Icon, FilledVariant } from '@skiff-org/skiff-ui';

  <IconText variant={FilledVariant.VARIANT} label='Static IconText' endIcon={Icon.Bolt} />
  <IconText variant={FilledVariant.VARIANT} label='Interactive IconText' endIcon={Icon.Plus} onClick={()=>{}} />

Properties

  • Name
    color
    Type
    Color
    Description

    Text label color.

  • Name
    disabled
    Type
    boolean
    Description

    Set the IconText to a disabled, unclickable state.

  • Name
    disableHover
    Type
    boolean
    Description

    Disable the hover state for interactiveIconText, without disabling onClick.

  • Name
    endIcon
    Type
    Icon
    Description

    Icon placed at the end of the IconText

  • Name
    filled
    Type
    boolean
    Description

    Add visible container to the IconText component.

  • Name
    forceTheme
    Type
    ThemeMode
    Description

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

  • Name
    forceIconSize
    Type
    IconSize
    Description

    Override the size of the Icon to be different than the text.

  • Name
    iconColor
    Type
    IconColor
    Description

    Override the color of the Icon to be different than the text.

  • Name
    label
    Type
    string
    Description

    Set the label text in the IconText component.

  • Name
    label
    Type
    string
    Description

    Set the font weight in the IconText component.

  • Name
    startIcon
    Type
    Icon
    Description

    Icon placed at the start of the IconText

  • Name
    weight
    Type
    IconTextWeight
    Description

    The size for the IconText.

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

    Function called when the IconText component is clicked.