Empty State

The zero-data placeholder every app needs — communicates context, reduces confusion, and gives users a clear next step.

Preview

No items yet

Get started by creating your first item. It only takes a few seconds.

Create item

Learn more →

Code

<div style="display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--lt-spacing-10) var(--lt-spacing-8); max-width: 380px;">
<div style="width: 72px; height: 72px; border-radius: 50%; background: var(--lt-color-primary-50); display: flex; align-items: center; justify-content: center; margin-bottom: var(--lt-spacing-5);">
  <lt-icon name="folder" size="lg" style="color: var(--lt-color-primary-500);"></lt-icon>
</div>
<lt-text variant="h4" style="color: var(--lt-text-default); margin-bottom: var(--lt-spacing-2);">No items yet</lt-text>
<lt-text variant="body" style="color: var(--lt-text-subtle); margin-bottom: var(--lt-spacing-6);">
  Get started by creating your first item. It only takes a few seconds.
</lt-text>
<lt-button variant="primary" icon-start="plus">Create item</lt-button>
<lt-link href="/docs" style="margin-top: var(--lt-spacing-3); display: block;">Learn more →</lt-link>
</div>

import { Icon, Text, Button, Link } from '@latty-ds/react';

export default function EmptyState() {
return (
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: 'var(--lt-spacing-10) var(--lt-spacing-8)', maxWidth: 380 }}>
    <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'var(--lt-color-primary-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 'var(--lt-spacing-5)' }}>
      <Icon name="folder" size="lg" style={{ color: 'var(--lt-color-primary-500)' }} />
    </div>
    <Text variant="h4" style={{ color: 'var(--lt-text-default)', marginBottom: 'var(--lt-spacing-2)' }}>
      No items yet
    </Text>
    <Text variant="body" style={{ color: 'var(--lt-text-subtle)', marginBottom: 'var(--lt-spacing-6)' }}>
      Get started by creating your first item. It only takes a few seconds.
    </Text>
    <Button variant="primary" iconStart="plus">Create item</Button>
    <Link href="/docs" style={{ marginTop: 'var(--lt-spacing-3)', display: 'block' }}>Learn more →</Link>
  </div>
);
}

<template>
<div style="display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--lt-spacing-10) var(--lt-spacing-8); max-width: 380px;">
  <div style="width: 72px; height: 72px; border-radius: 50%; background: var(--lt-color-primary-50); display: flex; align-items: center; justify-content: center; margin-bottom: var(--lt-spacing-5);">
    <lt-icon name="folder" size="lg" style="color: var(--lt-color-primary-500);"></lt-icon>
  </div>
  <lt-text variant="h4" style="color: var(--lt-text-default); margin-bottom: var(--lt-spacing-2);">No items yet</lt-text>
  <lt-text variant="body" style="color: var(--lt-text-subtle); margin-bottom: var(--lt-spacing-6);">
    Get started by creating your first item. It only takes a few seconds.
  </lt-text>
  <lt-button variant="primary" icon-start="plus">Create item</lt-button>
  <lt-link href="/docs" style="margin-top: var(--lt-spacing-3); display: block;">Learn more →</lt-link>
</div>
</template>

Components

lt-icon, lt-text, lt-button, lt-link