Component reference
CardFooter
The row of actions at the end of a card; it stacks whole when it does not fit, like ActionRow.
Preview
CardFooter has no story of its own; this one draws it as part of Card.
Project and embedded checks
One project record whose internal checks share a reading surface; standalone items can use their own surface. Actions only echo locally.
render: () => (
<Measure>
<Stack gap="relaxed" data-card-example>
<Card as="article" aria-labelledby="card-project-title">
<CardHeader>
<CardTitle id="card-project-title">Component checks before release</CardTitle>
<CardDescription>
Meowland · This check keeps two changes that need your confirmation.
</CardDescription>
<CardAction>
<IconButton
label="View project record"
data-card-action="Selected this project record"
>
<Icon name="eye" />
</IconButton>
</CardAction>
</CardHeader>
<CardContent>
<Card as="section" aria-labelledby="card-reading-title">
<CardHeader>
<CardTitle as="h3" id="card-reading-title">
Message reading and long code previews
</CardTitle>
<CardDescription>
Body text wrapping and local code scrolling are handled separately.
</CardDescription>
<CardAction>
<Status state="warning" label="Pending" />
</CardAction>
</CardHeader>
<CardContent>
<p>
Read a full reply on a narrow screen, then decide whether to adopt the new
paragraph spacing.
</p>
</CardContent>
<CardFooter>
<Button
variant="quiet"
size="small"
data-card-action="Opened the reading check record"
>
View check record
</Button>
</CardFooter>
</Card>
<Card as="section" aria-labelledby="card-recovery-title">
<CardHeader>
<CardTitle as="h3" id="card-recovery-title">
Draft recovery after continuous input and a failed submit
</CardTitle>
<CardDescription>
The submitted content and the latest draft are kept separately; editing can
continue after a failure.
</CardDescription>
</CardHeader>
<CardContent>
<p>
When reviewing, use long input and confirm the error message does not cover the
primary action.
</p>
<Card variant="surface">
<CardHeader>
<CardTitle as="h4">A separate verification environment</CardTitle>
<CardDescription>
This resource needs its own boundary, so the surface is explicit.
</CardDescription>
</CardHeader>
</Card>
</CardContent>
</Card>
</CardContent>
<CardFooter>
<Button data-card-action="Saved the local check conclusion">
Save check conclusion
</Button>
<Button variant="quiet" data-card-action="Kept the record to continue later">
Continue later
</Button>
</CardFooter>
</Card>
<Card as="section" aria-labelledby="card-reference-title">
<CardHeader>
<CardTitle id="card-reference-title">Related references</CardTitle>
<CardDescription>
Standalone items keep their own boundary and are not merged into the project record
above.
</CardDescription>
</CardHeader>
<CardContent>
<p>
The theme only changes visual expression; content structure and actions stay
available.
</p>
</CardContent>
</Card>
<Note role="status" data-card-feedback>
Actions only report back to the local example.
</Note>
</Stack>
</Measure>
)Installation
bun add meowtail
Usage
Taken from the examples on this page.
import { CardFooter } from "meowtail";
<CardFooter>
<Button
variant="quiet"
size="small"
>
View check record
</Button>
</CardFooter>Examples
Other stories that draw CardFooter.
Controls and composition
Check the proportions of text, controls, options, and containers on one screen. Default styles come straight from the component theme; nothing is enlarged or shrunk just for the demo.
render: () => (
<Measure width="content">
<Stack gap="relaxed">
<Stack gap="compact">
<strong>Start with the basic controls, then check the composed scale</strong>
<span>
Related content stays close while separate regions get space. Text wraps when long and
buttons stay recognizable.
</span>
<Inline gap="compact">
<Input aria-label="Project name" placeholder="Project name" />
<Button>Save</Button>
<Button variant="quiet">Cancel</Button>
</Inline>
<Inline gap="compact">
<Select aria-label="Native select" value="current">
<option value="current">Current workspace</option>
<option value="new">New workspace</option>
</Select>
<ChoiceSelect
id="scale-select"
aria-label="Custom select"
defaultValue="current"
options={[
{ value: "current", label: "Current workspace" },
{ value: "new", label: "New workspace" },
]}
/>
</Inline>
</Stack>
<Card>
<CardHeader>
<CardTitle>Workspace settings</CardTitle>
<CardDescription>
Inside a separate container, fields and actions keep the same control scale.
</CardDescription>
</CardHeader>
<CardContent>
<Field label="Display name" htmlFor="scale-name">
<Input id="scale-name" value="My workspace" />
</Field>
</CardContent>
<CardFooter>
<Button>Save settings</Button>
<Button variant="quiet">Restore defaults</Button>
</CardFooter>
</Card>
<ChatQuestion
question="How should this question be handled next?"
questionId="scale-question"
actions={[
<Button>Submit answer</Button>,
<Button variant="quiet">Answer in text</Button>,
<Button variant="quiet">Cancel question</Button>,
]}
>
<ChoiceGroup
id="scale-choice"
label="How to proceed"
hideLabel
options={[
{ value: "continue", label: "Keep investigating and preserve the existing work" },
{
value: "review",
label:
"Review the existing results first, then decide whether to continue with the unfinished parts",
},
]}
/>
</ChatQuestion>
</Stack>
</Measure>
)API reference
Props
Also takes className, children and the attributes and events of its root element.
DOM parts
root
Registry
The component is registered as card-footer in the meowtail component registry.