Audit Export

Enterprise

Compliance

Export activity logs for compliance and reporting. Features date range selection, multiple export formats (CSV, JSON, PDF), loading states, and export history tracking.

Preview

Interactive export interface

Export Audit Logs

Download compliance records for regulatory reporting

Date Range

Start Date

End Date

Export Format

States

Different states of the export component

Default

Export Audit Logs

Download compliance records for regulatory reporting

Date Range

Start Date

End Date

Export Format

Exporting

Export Audit Logs

Download compliance records for regulatory reporting

Date Range

Start Date

End Date

Export Format

With Export History

Shows timestamp of last export

Export Audit Logs

Download compliance records for regulatory reporting

Date Range

Start Date

End Date

Export Format

Last export: 3/21/2026, 8:48:00 PM

Props

AuditExport component API reference

Prop	Type	Default	Description
`onExport*`	`(format: ExportFormat, dateRange: DateRange) => void`	—	Callback when export is triggered with format and date range
`isExporting`	`boolean`	`false`	Whether an export is currently in progress
`lastExport`	`Date`	—	Timestamp of last successful export
`className`	`string`	—	Additional CSS classes for the container

ExportFormat Type

"csv" |"json" |"pdf"

DateRange Type

Prop	Type	Default	Description
`start*`	`Date`	—	Start date of the export range
`end*`	`Date`	—	End date of the export range

Usage

Import and implementation example

import { AuditExport } from '@/blocks/workflow/audit-export'

export default function Example() {
  const [isExporting, setIsExporting] = useState(false)
  const [lastExport, setLastExport] = useState<Date>()

  const handleExport = (format, dateRange) => {
    setIsExporting(true)

    // Perform export with format and dateRange
    exportAuditLogs(format, dateRange.start, dateRange.end)
      .then(() => {
        setLastExport(new Date())
      })
      .finally(() => {
        setIsExporting(false)
      })
  }

  return (
    <AuditExport
      onExport={handleExport}
      isExporting={isExporting}
      lastExport={lastExport}
    />
  )
}

Built With

1 component

This block uses the following UI components from the design system:

Button

Features

Built-in functionality

Date range selection: Pick start and end dates with native date inputs
Multiple formats: Export as CSV, JSON, or PDF with toggle buttons
Loading state: Animated spinner and disabled state during export
Export history: Shows timestamp of last successful export
Default date range: Pre-fills with last 30 days by default
Format persistence: Selected format is maintained in component state
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Date inputs are native HTML date inputs with labelsFormat buttons are native button elementsExport button shows loading state text

Keyboard Navigation

Key	Action
`Tab`	Navigate between date inputs, format buttons, and export button
`Enter / Space`	Activate focused button
`Arrow keys`	Navigate date picker when focused

Notes

Labels are associated with inputs via nested structure
Loading state disables the button to prevent double submission
Consider adding aria-live for export status announcements
Format selection clearly indicates active state via styling

Related Components

Audit Log Button Input Badge