Skip to main content

<hx-file-tile> v0.12.0+ HelixUI v0.12.0 or later required

The custom <hx-file-tile> element is a tileable representation of a remote file.


Simulates a mouse click on the dismiss button (i.e., clicking the "X")
Simulates a mouse click on the retry button (i.e., clicking "retry")


Attributes allow you to configure an element in a declarative manner via markup.

details {String} (optional)

Sets the details of the file, such as size.

href {String} (optional)

Sets the path pointing to the remote file. If absent, file cannot be downloaded.

icon {Enum<String>} (optional)

Changes the displayed icon to one of the available icons.

invalid {Boolean [false]} (optional)

When present, marks element invalid.

name {String} (optional)

Sets the display name of the file.

progress {Integer (0-100)} (optional)

When present, marks element as loading and denotes completion percentage.


Properties allow you to configure an element in an imperative manner via JavaScript.

extension {String}

(read-only) Inferred file extension from the name attribute.

href {String}

Manipulates the href attribute.

icon {String}

Manipulates the icon attribute.

invalid {Boolean}

Toggles the presence of the invalid attribute.

loading {Boolean}

(read-only) Returns true when the progress attribute is present.

name {String}

Manipulates the name attribute.

progress {Interger}

Manipulates the progress attribute.

truncated {Boolean}

(read-only) Returns true if the length of the name attribute is long enough to truncate.

See Also