File Browser

Overview

The file browser domain provides components for browsing and navigating files and folders. FileList renders a sortable, selectable table view. FileGrid displays files in a card grid. BreadcrumbNav shows the folder path. FileStatusBadge and FileTypeIcon are presentational atoms for file metadata.

Usage

import { BreadcrumbNav, FileStatusBadge, FileTypeIcon } from "@leanicon/web-builder-library/saas";

<BreadcrumbNav
  path={[{ id: "1", name: "Documents" }, { id: "2", name: "Projects" }]}
  onNavigate={(folderId) => console.log("Navigate:", folderId)}
/>

<FileStatusBadge status="active" />

<FileTypeIcon mimeType="application/pdf" size="md" />

Components

BreadcrumbNav - Default

BreadcrumbNav - With Home

BreadcrumbNav - Long Path (Collapsed)

BreadcrumbNav (Dark)

FileStatusBadge - All Statuses

FileStatusBadge - All Sizes

FileStatusBadge - Without Dot

FileTypeIcon - Document Types

FileTypeIcon - All Sizes

FileTypeIcon - Folder