v0.9.9defuss-shadcn
Theme
Design your own

defuss-shadcn / Website / Account & States / empty-state

Built with: CSS

Empty StateBLK

Explains missing content and offers an appropriate next action - an icon, why it is empty, and the first step; on a dashed area or inline in a list. Part of the Account & States blocks.

On this page (4)
Component Skill — components/empty-state/component-skill.md

Native basis

A <section>: an icon in soft concentric rings, a heading that says what is empty, a sentence on why or what comes next, and a primary action (plus an optional secondary link).

Built from

Button.

Web Platform APIs

Container queries

Classes

.mk-empty-state.mk-empty-state-icon.mk-empty-state-title.mk-empty-state-text.mk-empty-state-actions

Data attributes

data-variant: dashed, compact.

§Default

An icon in soft rings, what is empty, why, and the first step.

§Dashed

data-variant='dashed': on a dashed area - an empty board or a place to drop files.

§Compact

data-variant='compact': one row inside a list or table - for "no results" in a filtered view.

§CSS view file

/* -- Empty State (website · Account & States) -----------------------------
   Explains missing content and offers an appropriate next action - an icon, why it is empty, and the first step; on a dashed area or inline in a list. */
@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-empty-state, .mk-empty-state *, .mk-empty-state ::before, .mk-empty-state ::after) {
    box-sizing: border-box;
  }
  .mk-empty-state {
    display: grid;
    justify-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
    padding: 2.5rem 1.5rem;
    text-align: center;
  }
  .mk-empty-state-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--muted);
  }
  .mk-empty-state-icon svg {
    width: 1.75rem;
    height: 1.75rem;
  }
  .mk-empty-state-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .mk-empty-state-text {
    margin: 0;
    color: var(--muted-foreground);
    line-height: 1.6;
    text-wrap: pretty;
  }
  .mk-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-block-start: 0.25rem;
  }
  .mk-empty-state-icon {
    box-shadow:
      0 0 0 0.625rem color-mix(in oklch, var(--muted) 60%, transparent),
      0 0 0 1.25rem color-mix(in oklch, var(--muted) 30%, transparent);
    margin-block: 1.25rem 0.5rem;
  }
  .mk-empty-state[data-variant="dashed"] {
    max-width: none;
    border: 2px dashed var(--border);
    border-radius: var(--radius-xl);
  }
  .mk-empty-state[data-variant="compact"] {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    gap: 0 1rem;
    max-width: none;
    padding: 1rem 1.25rem;
    text-align: start;
    & .mk-empty-state-icon {
      grid-row: span 2;
      width: 2.5rem;
      height: 2.5rem;
      margin: 0;
      box-shadow: none;
      & svg {
        width: 1.125rem;
        height: 1.125rem;
      }
    }
    & .mk-empty-state-title {
      font-size: 0.9375rem;
    }
    & .mk-empty-state-text {
      font-size: 0.875rem;
    }
    & .mk-empty-state-actions {
      grid-column: 3;
      grid-row: 1 / span 2;
      margin: 0;
    }
  }
  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-empty-state-icon {
      border: 1px solid CanvasText;
      box-shadow: none;
    }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub