Display

Empty

Placeholder state for empty lists, search results, or missing data.

Dashboard Zero State

The primary empty state for a dashboard or main view. Features a prominent icon, title, description, and a clear call-to-action button.

No active campaigns

You haven't created any marketing campaigns yet. Start your first campaign to engage with your audience.

'use client'

import React from 'react'
import { Empty, Button, Icon } from 'biibaos'
import { Plus } from 'lucide-react'

export default function DashboardZeroState() {
  return (
    <div style={{ padding: 24, background: 'var(--biiba-surface-raised)', borderRadius: 24, border: '1px solid var(--biiba-border)' }}>
      <Empty
        variant="default"
        title="No active campaigns"
        description="You haven't created any marketing campaigns yet. Start your first campaign to engage with your audience."
        action={
          <Button variant="primary" leftIcon={<Icon icon={Plus} size={16} />}>
            Create Campaign
          </Button>
        }
      />
    </div>
  )
}

Contextual & Error States

Pre-configured variants for search results or error states. You can also override the default icon with the icon prop.

No results found

We couldn't find anything matching 'BiibaOS'. Try adjusting your filters.

Connection Failed

Unable to sync with the server. Please check your network and try again.

'use client'

import React from 'react'
import { Empty, Grid, Button, Icon } from 'biibaos'
import { AlertCircle } from 'lucide-react'

export default function ContextualStates() {
  return (
    <Grid columns={{ base: 1, md: 2 }} gap={16}>
      <Empty 
        variant="search" 
        title="No results found" 
        description="We couldn't find anything matching 'BiibaOS'. Try adjusting your filters." 
        compact 
      />
      
      <Empty 
        variant="error" 
        icon={<Icon icon={AlertCircle} size={40} color="var(--biiba-danger)" />}
        title="Connection Failed" 
        description="Unable to sync with the server. Please check your network and try again." 
        action={<Button variant="secondary" size="sm">Retry Connection</Button>}
        compact 
      />
    </Grid>
  )
}

Minimal & Inline

Use the minimal or simple variants for tighter spaces like dropdowns, sidebars, or small cards. Minimal drops the background and borders entirely.

No attachments

Drag and drop files here.

Empty Folder

There's nothing to show here at the moment.

'use client'

import React from 'react'
import { Empty, Grid } from 'biibaos'

export default function MinimalStates() {
  return (
    <Grid columns={{ base: 1, md: 2 }} gap={16}>
      <div style={{ padding: 16, border: '1px solid var(--biiba-border)', borderRadius: 16, background: 'var(--biiba-surface)' }}>
        <Empty 
          variant="simple" 
          title="No attachments" 
          description="Drag and drop files here." 
          compact 
        />
      </div>

      <div style={{ padding: 16, border: '1px dashed var(--biiba-border)', borderRadius: 16, background: 'var(--biiba-surface-raised)' }}>
        <Empty 
          variant="minimal" 
          title="Empty Folder" 
          compact 
        />
      </div>
    </Grid>
  )
}

Properties

Prop	Type	Default	Description
`variant`	`EmptyVariant`	'default'	Semantic design theme variant
`icon`	`React.ReactNode`	—	Custom icon prefix element
`title`	`string`	—	Structural modal header title
`description`	`string`	"There's nothing to show here at the moment."	Supporting description or helper guidance text
`action`	`React.ReactNode`	—	Configures the action option
`compact`	`boolean`	false	Configures the compact option

Status Page

Calendar