Skip to content
DOL Studio

Footer

Design: Stable Code: Coded layoutend-of-listpaginationinfinite-scroll 1 Figma set Footer/End Section

Live preview

Figma canonical: EndOfList — 3 states (Pass 78 audit-fix)
state="out" (default)
Bạn đã xem hết
state="load-more"
state="loading"
Loading…
EndOfList — English locale + custom labels
You've reached the end
No more search results · adjust filters above
DOL extension: SiteFooter composition (@dol/ui/footer — Pass 72)

Site-wide footer composition primitive — Footer + FooterColumns + FooterLink + FooterLegal. No Figma source; built for landing-page chrome.

tone="light" (default)
tone="dark" — children auto-adapt via FooterToneContext (Pass 75)
tone="minimal" — small footer for docs / utility pages

Import & files

Import
import { Footer } from "@dol/ui/end-of-list";
Source file
packages/@dol/ui/src/end-of-list/EndOfList.tsx

Figma source

Figma source 1 set
Page
Footer
Sets
1
Primary set
Footer/End Section · 3 variants Open in Figma →
Showing: Footer/End Section

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Footer
Slug: `footer`
Domain: general · Category: layout
Design: stable · Code: coded


## Description
End-of-list / pagination indicator. 3 states: `out` (you've reached end), `load-more` (action button), `loading` (spinner). Matches Figma `Footer/End Section`. NOT a site footer — that's the DOL-extension SiteFooter composition at `@dol/ui/footer`.


## Import
```ts
import { Footer } from "@dol/ui/end-of-list";
```
Source: `packages/@dol/ui/src/end-of-list/EndOfList.tsx`


## Figma source
Page: Footer
Sets: 1
Primary: Footer/End Section
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=14177-192073

Related

  • Section title

    Collapse

    Coded
  • M
    audio

    Media

    Design only

  • Mockup UI (Status bar, Indicator, Browser)

    Coded

  • Card

    Code only

  • FeatureCard

    Code only

  • IconBox

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).