Button

Users can triggers actions, such as form submission, dropdowns, or navigation.

Primary Text Button

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

Large
Medium
Small

Example: Default button

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

  <Button onClick={onClick} size={Size.LARGE}>
    Large
  </Button>

  <Button onClick={onClick}>
    Medium
  </Button>

  <Button onClick={onClick} size={Size.SMALL}>
    Small
  </Button>

Secondary Text Button

For supporting or inverse actions.

Large
Medium
Small

Example: Secondary button

  import { Button, Size, Type } from '@skiff-org/skiff-ui';

  <Button onClick={onClick} size={Size.LARGE} type={Type.SECONDARY}>
    Large
  </Button>

  <Button onClick={onClick} type={Type.SECONDARY}>
    Medium
  </Button>

  <Button onClick={onClick} size={Size.SMALL} type={Type.SECONDARY}>
    Small
  </Button>

Tertiary Text Button

For tertiary supporting actions.

Large
Medium
Small

Example: Tertiary button

  import { Button, Size, Type } from '@skiff-org/skiff-ui';

  <Button onClick={onClick} size={Size.LARGE} type={Type.TERTIARY}>
    Large
  </Button>

  <Button onClick={onClick} type={Type.TERTIARY}>
    Medium
  </Button>

  <Button onClick={onClick} size={Size.SMALL} type={Type.TERTIARY}>
    Small
  </Button>

Destructive Text Button

For serious negative actions.

Large
Medium
Small

Example: Destructive button

  import { Button, Size, Type } from '@skiff-org/skiff-ui';

  <Button onClick={onClick} size={Size.LARGE} type={Type.DESTRUCTIVE}>
    Large
  </Button>

  <Button onClick={onClick} type={Type.DESTRUCTIVE}>
    Medium
  </Button>

  <Button onClick={onClick} size={Size.SMALL} type={Type.DESTRUCTIVE}>
    Small
  </Button>

Loading

For in-progress actions.

Large

Example: Default button

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

  <Button loading onClick={onClick} size={Size.LARGE}>
    Label
  </Button>

Icons

You can display an Icon at the start of the button.

Reply

Example: Default button

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

  <Button startIcon={Icon.Reply} onClick={onClick}>
    Reply
  </Button>

Properties

  • Name
    disabled
    Type
    boolean
    Description

    Set the button to a disabled, unclickable state.

  • Name
    forceTheme
    Type
    ThemeMode
    Description

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

  • Name
    fullWidth
    Type
    boolean
    Description

    Expand button to take 100% of parent container width.

  • Name
    iconColor
    Type
    Color
    Description

    Override the color of the start icon

  • Name
    loading
    Type
    boolean
    Description

    Display a spinner instead of the button label or icon.

  • Name
    size
    Type
    Size
    Description

    The size for the Button.

  • Name
    startIcon
    Type
    Icon | JSX.Element
    Description

    Icon displayed at start of the button

  • Name
    tooltip
    Type
    string
    Description

    Display a tooltip label on hover.

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

    Call function when the button is clicked.