Skip to main content

Content Patterns

Common content patterns and examples for Teardrop Design System.

Empty States​

Empty states appear when there's no content to display.

Structure​

  1. Clear heading - Explain what's missing
  2. Helpful description - Why it's empty and what to do
  3. Action - Button or link to take action

Example​

No projects yet

Create your first project to get started.

[Create Project]

Code Example​

<Stack gap="medium" align="center">
  <Icon name="folder" size="large" />
  <Heading level={2}>No projects yet</Heading>
  <Text align="center">
    Create your first project to get started.
  </Text>
  <Button variant="primary">Create Project</Button>
</Stack>

Loading States​

Loading messages inform users that something is happening.

Examples​

  • "Loading..."
  • "Saving changes..."
  • "Uploading file..."
  • "Processing..."

Code Example​

{isLoading ? (
  <Inline gap="small" align="center">
    <Spinner size="small" />
    <Text>Saving changes...</Text>
  </Inline>
) : (
  <Text>Changes saved</Text>
)}

Error Messages​

Error messages explain what went wrong and how to fix it.

Structure​

  1. What went wrong - Clear explanation
  2. Why it happened - Context (optional)
  3. How to fix - Actionable steps

Examples​

Good:

Email address is required

Please enter a valid email address to continue.

Better:

Invalid email format

Please check your email address and try again. 
Make sure it includes an @ symbol and a domain.

Code Example​

<Box
  padding="medium"
  backgroundColor="semantic.error.100"
  borderRadius="medium"
>
  <Stack gap="small">
    <Inline gap="small" align="center">
      <Icon name="error" color="semantic.error.700" />
      <Heading level={3} color="semantic.error.700">
        Invalid email format
      </Heading>
    </Inline>
    <Text color="semantic.error.700">
      Please check your email address and try again.
    </Text>
  </Stack>
</Box>

Success Messages​

Success messages confirm that an action completed successfully.

Examples​

  • "Changes saved successfully"
  • "Account created"
  • "Email sent. Check your inbox."
  • "Project deleted"

Code Example​

<Box
  padding="medium"
  backgroundColor="semantic.success.100"
  borderRadius="medium"
>
  <Inline gap="small" align="center">
    <Icon name="check-circle" color="semantic.success.700" />
    <Text color="semantic.success.700">
      Changes saved successfully
    </Text>
  </Inline>
</Box>

Confirmation Dialogs​

Confirmation dialogs ask users to confirm important actions.

Structure​

  1. Clear question - What will happen
  2. Context - Why confirmation is needed
  3. Action buttons - Clear options

Example​

Delete project?

This action cannot be undone. All project data will be permanently deleted.

[Cancel] [Delete Project]

Code Example​

<Modal
  title="Delete project?"
  onClose={handleClose}
>
  <Stack gap="large">
    <Text>
      This action cannot be undone. All project data will be permanently deleted.
    </Text>
    <Inline gap="small" justify="end">
      <Button variant="secondary" onClick={handleClose}>
        Cancel
      </Button>
      <Button variant="destructive" onClick={handleDelete}>
        Delete Project
      </Button>
    </Inline>
  </Stack>
</Modal>

Form Labels and Help Text​

Labels​

  • Clear and descriptive
  • Indicate required fields
  • Use consistent terminology

Examples:

  • "Email address" (required)
  • "Phone number" (optional)
  • "Password" (must be at least 8 characters)

Help Text​

  • Provide context when needed
  • Explain requirements
  • Use plain language

Examples:

  • "Must be at least 8 characters"
  • "We'll never share your email"
  • "Include uppercase, lowercase, and numbers"

Button Labels​

Button labels should be:

  • Action verbs
  • Short (1-3 words)
  • Clear about what will happen

Good:

  • "Save changes"
  • "Delete account"
  • "Submit form"
  • "Cancel"

Avoid:

  • "Click here to save"
  • "Are you sure you want to delete?"
  • "Submit the form data"

Navigation labels should be:

  • Clear and concise
  • Consistent across pages
  • Use common terms

Examples:

  • "Home"
  • "Projects"
  • "Settings"
  • "Help"

Resources​