File

The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

This component is primarily used alongside the Upload feature to indicate that a file has been uploaded.

It can also be used on its own, but it should relate to the rest of the content on the page in terms of width.

Anatomy

Heading
Complementary link
Description
Drop zone
Text

States

Default
Loading
Success
Error
Focused
Hover

Example
HTML

file_generated_3.jpeg

1 MB

file_generated_3.jpeg

Error text

file_generated_3.jpeg

1 MB

file_generated_3.jpeg

1 MB

development/documentation/docs/file/examples/file-states.html

<div class="d-flex flex-wrap gap-24">
    <!-- 1. Default -->
    <div class="docs-file-state">
        <span class="docs-state-number" aria-hidden="true">1</span>
        <div class="file" id="file-state-default" tabindex="0" role="group" aria-label="file_generated_3.jpeg">
            <div class="file-content">
                <div class="file-icon">
                    <span aria-hidden="true" class="spirisicon spirisicon-file-image"></span>
                </div>
                <div class="file-meta">
                    <p class="file-name">file_generated_3.jpeg</p>
                    <p class="file-description">1 MB</p>
                </div>
            </div>
            <button type="button" class="btn btn-icon btn-lg" aria-label="Remove file">
                <span aria-hidden="true" class="spirisicon spirisicon-delete"></span>
            </button>
        </div>
    </div>

    <!-- 2. Loading -->
    <div class="docs-file-state">
        <span class="docs-state-number" aria-hidden="true">2</span>
        <div class="file loading" id="file-state-loading" tabindex="0" role="group" aria-label="file_generated_3.jpeg, uploading">
            <div class="file-content">
                <div class="file-icon">
                    <span aria-hidden="true" class="spirisicon spirisicon-file-image"></span>
                </div>
                <div class="file-meta">
                    <p class="file-name">file_generated_3.jpeg</p>
                    <div class="file-progress" aria-label="Upload progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60">
                        <span class="file-progress-bar" style="width: 60%"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 3. Success -->
    <div class="docs-file-state">
        <span class="docs-state-number" aria-hidden="true">3</span>
        <div class="file success" id="file-state-success" tabindex="0" role="group" aria-label="file_generated_3.jpeg, upload complete">
            <div class="file-content">
                <div class="file-icon">
                    <span aria-hidden="true" class="spirisicon spirisicon-file-image"></span>
                </div>
                <div class="file-meta">
                    <p class="file-name">file_generated_3.jpeg</p>
                    <div class="file-progress" aria-label="Upload complete" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
                        <span class="file-progress-bar" style="width: 100%"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 4. Error -->
    <div class="docs-file-state">
        <span class="docs-state-number" aria-hidden="true">4</span>
        <div class="file error" id="file-state-error" tabindex="0" role="group" aria-label="file_generated_3.jpeg, error">
            <div class="file-content">
                <div class="file-icon">
                    <span aria-hidden="true" class="spirisicon spirisicon-file-image"></span>
                </div>
                <div class="file-meta">
                    <p class="file-name">file_generated_3.jpeg</p>
                    <p class="file-error-text">
                        <span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-alert"></span>
                        Error text
                    </p>
                </div>
            </div>
            <button type="button" class="btn btn-secondary btn-sm">Button</button>
        </div>
    </div>

    <!-- 5. Focused -->
    <div class="docs-file-state">
        <span class="docs-state-number" aria-hidden="true">5</span>
        <div class="file focus" id="file-state-focus" tabindex="0" role="group" aria-label="file_generated_3.jpeg">
            <div class="file-content">
                <div class="file-icon">
                    <span aria-hidden="true" class="spirisicon spirisicon-file-image"></span>
                </div>
                <div class="file-meta">
                    <p class="file-name">file_generated_3.jpeg</p>
                    <p class="file-description">1 MB</p>
                </div>
            </div>
            <button type="button" class="btn btn-icon btn-lg" aria-label="Remove file">
                <span aria-hidden="true" class="spirisicon spirisicon-delete"></span>
            </button>
        </div>
    </div>

    <!-- 6. Hover -->
    <div class="docs-file-state">
        <span class="docs-state-number" aria-hidden="true">6</span>
        <div class="file hover" id="file-state-hover" tabindex="0" role="group" aria-label="file_generated_3.jpeg">
            <div class="file-content">
                <div class="file-icon">
                    <span aria-hidden="true" class="spirisicon spirisicon-file-image"></span>
                </div>
                <div class="file-meta">
                    <p class="file-name">file_generated_3.jpeg</p>
                    <p class="file-description">1 MB</p>
                </div>
            </div>
            <button type="button" class="btn btn-icon btn-lg" aria-label="Remove file">
                <span aria-hidden="true" class="spirisicon spirisicon-delete"></span>
            </button>
        </div>
    </div>
</div>

Usage

File information is typically displayed directly below the Upload component immediately after the user interacts with it — either by selecting a file or once the upload is complete.

Example
HTML

Upload files

Drag and drop or click to upload

SVG, PNG, JPG or GIF (max 500mb)

file_generated_3.jpeg

1 MB

development/documentation/docs/file/examples/file-usage.html

<div class="docs-file-usage">
    <div class="drop-area" id="file-usage-upload">
        <input type="file" id="file-usage-upload-input" class="drop-area-input" aria-label="Upload files">
        <label for="file-usage-upload-input" class="drop-area-upload">Upload files</label>
        <div class="drop-area-content">
            <span aria-hidden="true" class="spirisicon spirisicon-upload"></span>
            <div class="drop-area-section">
                <p class="drop-area-heading">Drag and drop or <span class="drop-area-link">click to upload</span></p>
                <p class="drop-area-description">SVG, PNG, JPG or GIF (max 500mb)</p>
            </div>
        </div>
    </div>
    <div class="file" id="file-usage-file" tabindex="0" role="group" aria-label="file_generated_3.jpeg">
        <div class="file-content">
            <div class="file-icon">
                <span aria-hidden="true" class="spirisicon spirisicon-file-image"></span>
            </div>
            <div class="file-meta">
                <p class="file-name">file_generated_3.jpeg</p>
                <p class="file-description">1 MB</p>
            </div>
        </div>
        <button type="button" class="btn btn-icon btn-lg" aria-label="Remove file">
            <span aria-hidden="true" class="spirisicon spirisicon-delete"></span>
        </button>
    </div>
</div>

Hover icon

When hovering an icon, apply the same hover state styling used for our Icon Buttons. While the icon size may vary, the hover effect must remain consistent.

File row with the cursor hovering the trash icon button, showing the icon-button hover state

Accessibility

Keyboard interaction

The whole file row is reachable via TAB and SHIFT+TAB — focus lands on the row first, then on the trash icon (or any action button inside it). A focused row shows a blue keyboard-focus ring.

Example
HTML

file_generated_3.jpeg

1 MB

development/documentation/docs/file/examples/file-focus.html

<div class="file focus" id="file-focus-example" tabindex="0" role="group" aria-label="file_generated_3.jpeg">
    <div class="file-content">
        <div class="file-icon">
            <span aria-hidden="true" class="spirisicon spirisicon-file-image"></span>
        </div>
        <div class="file-meta">
            <p class="file-name">file_generated_3.jpeg</p>
            <p class="file-description">1 MB</p>
        </div>
    </div>
    <button type="button" class="btn btn-icon btn-lg" aria-label="Remove file">
        <span aria-hidden="true" class="spirisicon spirisicon-delete"></span>
    </button>
</div>

File

Anatomy

States

Usage

Hover icon

Accessibility

Keyboard interaction

Specs