UploadButton

The UploadButton component allows users to upload a file with a button.

View source code
  • onUpload
    (files: FileList) => void | Promise<void>

    Handler that is called when a file is submitted.

  • text
    string

    The text to display in the button.

  • accept
    string

    One or more unique file type specifiers describing file types to allow. Cf https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers

    Default:
  • ariaLabel
    string

    aria-label for the input.

  • className
    string

    className for the element.

  • fit
    "content" | "parent"

    Specifies the width of the element.

  • hasNoHorizontalPadding
    boolean

    Whether the button should have no horizontal padding. Has effect only on tertiary variant

    Default: false
  • iconName
    "adjustments-horizontal" | "archive" | "arrow-down-tray" | "arrow-down" | "arrow-left-right" | "arrow-left" | "arrow-path" | "arrow-right-rectangle" | "arrow-right" | "arrow-split" | "arrow-top-right-square" | "arrow-turn-right" | "arrow-up-tray" | "arrow-up" | "arrow-uturn-left-down" | "arrow-uturn-right-top" | ... 140 more ...

    The icon to display in the button.

  • iconPosition
    "left" | "right"

    Specifies where the icon is positioned.

  • isDisabled
    boolean

    Whether the button should be disabled.

  • isMultiple
    boolean

    Be able to select more than one file.

    Default: false
  • variant
    "primaryAlert" | "primaryBrand" | "primaryInfo" | "primarySuccess" | "primaryWarning" | "secondaryAlert" | "secondaryBrand" | "secondaryInfo" | "secondaryNeutral" | "secondarySuccess" | "secondaryWarning" | "tertiaryAlert" | "tertiaryBrand" | "tertiaryComplementary" | "tertiaryInfo" | "tertiaryNeutral" | ... 2 more ...

    The visual style of the button

    Default: primaryBrand