Archive Buttons: Design Guide, Examples & Checklist (2026)

Archive buttons hide an item from your main view without deleting it, so you can bring it back later. That makes archiving reversible, while deleting usually isn’t. A good archive button has a clear label, a familiar icon, a fixed position, an undo message and an easy way to restore items.

Here’s the thing, though.

Most people don’t read the label. They click, the item vanishes, and they hope for the best.

I’ve seen that tiny moment of doubt turn into bug reports, support tickets and lost data in some of the biggest apps out there. So in this guide, I’ll show you what archive buttons really do, where designers go wrong, and how you can build one people trust. You’ll also get a scored checklist at the end.

What Are Archive Buttons?

Before you design anything, you need to know what you’re promising users. And that’s trickier than it sounds. “Archive” means something slightly different in almost every product. In some apps it’s a tidy filing cabinet. In others it’s a delete button wearing a nicer name. So let’s pin down the definition first, then compare it with delete and trash, because every design choice you make later depends on getting this right.

Archive vs. Delete vs. Trash: A Quick Comparison

This is where most confusion starts. Archive vs delete isn’t a style choice. It’s a promise about what happens to someone’s stuff.

I pulled the differences together from Gmail Help and Microsoft Support. Use this as your cheat sheet:

	Archive	Trash (soft delete)	Permanent delete
Visible in main view?	No	No	No
Can you restore it?	Yes, any time	Yes, until it’s purged	No
Auto-purged?	Never (Outlook’s Archive folder isn’t auto-emptied)	Often after about 30 days	Already gone
Findable by search?	Yes (Gmail: `in:archive`)	Usually only inside the trash	No
Best for	“Not now”	“Probably not needed”	“Never again”
Risk level	Low	Medium	High

My rule of thumb? Archive means “not now.” Delete means “never again.”

If your button breaks that rule, you’ve got a trust problem.

How Gmail Handles Archiving

Gmail is the gold standard, so it’s worth a closer look. Per Gmail’s help page, an archived message leaves your inbox but stays under the “All mail” label. If someone replies, it returns to your inbox on its own.

You can archive by checking a box and clicking the button, or by pressing E (see Gmail keyboard shortcuts). To find archived mail later, use the in:archive operator from Gmail’s search operators list. And to reverse it, you click “Move to Inbox.”

Notice what Gmail gets right: a single click in, a clear path out, and nothing permanently lost.

What Users Want When They Search for Archive Buttons

Why does search intent matter here? Because the same keyword hides three different people. If you serve only one, the other two bounce. And bounces hurt rankings. So let’s look at who’s actually typing “archive buttons” into Google, and what each of them needs from your page. I’d answer all three in this article, because it keeps readers around longer and builds topical authority.

The Three Types of Searchers

1. The nervous clicker. They hit archive and now they’re worried. Where did it go? Can they get it back? They need a calm, quick answer.

2. The how-to searcher. They want steps. In Gmail, that’s check the box, click Archive, done.

3. The designer or developer. They’re building the control. They want patterns, examples and a checklist.

This guide is mostly for number three. But I’ve included quick answers for the first two, including an FAQ near the bottom.

Real-World Archive Button Failures

Want proof this goes wrong? Public issue trackers are full of it. And honestly, these reports read like a “what not to do” list. Each one comes from real users in real products, so they make great examples. They’re user reports rather than lab studies, so I treat them as evidence of patterns, not proof of how often they happen. Here’s a quick summary of five cases, followed by what they teach.

Five Cases, Five Lessons

Case	What went wrong	Lesson
VS Code Copilot Chat	“Archive” button reportedly deleted conversations, next to a trash icon	Match the label to the behavior
Codex app	Easy to trigger by accident, unclear meaning, no obvious undo	Add an undo toast
Claude Code desktop	An X icon archived a session instead of dismissing a notification	Don’t use X for archive
PhotoPrism	“Remove from album” looked like “archive” and sat where archive was expected	Differentiate lookalike buttons
Thunderbird	Archive and delete swapped places between single and multi-select views	Keep positions consistent

See the pattern? None of these is a technical bug. Every one is a button labeling or button placement failure.

That’s good news, because it means you can fix them with design alone.

Why Undo Beats Confirmation for Archive Buttons

Here’s a debate I see all the time: should your archive button ask “Are you sure?” or just do it? I used to default to the dialog. Then I read the research and changed my mind. Confirmation dialogs train people to click through on autopilot, while undo gives them a real safety net. Let me show you why that matters for every destructive action, big or small.

The Habit Problem

Aza Raskin made this case back in 2007 in Never Use a Warning When You Mean Undo. His argument is simple. People form habits, and habits make them click “OK” without thinking. So warnings fail exactly when you need them most.

His fix? Let the action happen, then offer a way back.

Nielsen Norman Group backs up the “use sparingly” part. In Confirmation Dialogs Can Prevent User Errors, Jakob Nielsen advises saving confirmations for serious actions, skipping them for routine ones, and being specific about what’s about to happen. He also says to offer undo wherever you can.

Terms like error prevention and feedback new to you? Our UX basics beginner’s guide breaks down the core principles in plain English.

A Simple Three-Tier Rule

I like how the Automattic design system organizes this. It’s easy to remember:

Easily undone? Add no extra friction.
Immediate but reversible? Show a snackbar with an undo toast.
Irreversible? Use a confirmation dialog.

Archiving almost always lands in the middle tier. So skip the dialog. Show “Archived” with an Undo button instead.

Step-by-Step: How to Design Archive Buttons Users Trust

Time to get practical. I’ve boiled everything above into five steps you can follow today, whether you’re working in Figma or shipping code. Need a hand with mockups? These AI tools for designers can speed up the visual side. Each step fixes one of the failures you just saw. Work through them in order, and you’ll end up with a button that’s clear, forgiving and accessible. Ready? Let’s go.

Step 1: Make the Label Match the Behavior

Say what the button does. If it hides something reversibly, call it “Archive.” If it removes something for good, call it “Delete.”

Sounds basic, I know. Yet the VS Code report shows how easily a mismatch slips through.

Also, keep Delete as a separate action. The Codex issue suggests exactly that: archive as reversible hiding, delete as intentional removal with its own confirmation.

Step 2: Choose the Right Icon and Lock Its Position

Pick an icon people already recognize. Gmail’s box with a down arrow has been teaching users for years.

Don’t borrow an X. It means “dismiss,” not “archive.”

Next, fix the position. If archive sits left of delete in one view, it must sit there in every view. The Thunderbird bug shows why: when buttons jump around, people click the wrong one. A small gap between the two helps, too.

Step 3: Add an Undo Toast

Right after someone archives, show a short message like “Conversation archived” with an Undo button. Keep it on screen for several seconds, and make sure keyboard users can reach it.

If someone archives ten items in a row, batch them into one toast. Otherwise you’ll bury the screen in notifications.

Honestly, this is the highest-impact change on the whole list.

Step 4: Give People a Visible Way to Restore

Undo only lasts a few seconds. After that, people need an obvious path to restore from archive.

Ask yourself: where does archived content live? Can users find it in two clicks? Can they search it? If the answer is no, fix that before anything else. The Codex user asking how to de-archive is waiting on you.

Step 5: Make Archive Buttons Accessible

Accessibility isn’t a bonus round. It’s part of the job. An icon button with no text label is invisible to a screen reader, and a tiny one is a nightmare for anyone with shaky hands. Two details matter most: the size of the clickable area and the name the button announces. Let me walk you through both.

Touch Target Size

The W3C’s Target Size (Minimum) criterion (WCAG 2.2, Level AA) says targets should be at least 24 by 24 CSS pixels. There are exceptions. One of them is spacing: smaller targets can pass if a 24-pixel circle centered on each one doesn’t overlap another target. W3C’s own example shows 20-pixel icon buttons passing with a 4-pixel gap between them.

My advice? Don’t lean on the exception. Aim for the bigger, stricter Target Size (Enhanced) goal of 44 by 44 pixels on mobile. If the icon looks small, add padding so the touch target size grows without changing the design.

Accessible Name

Give every icon button an accessible name that describes the action. The Flutter team’s post on accessible Material Icons warns about a common mistake: labeling an icon by its picture instead of its action.

So write “Archive conversation,” not “box with arrow.” The Intelligence Community Design System adds a good habit: pair icons with text labels or tooltips so their meaning is obvious.

Swipe to Archive: Mobile Considerations

Mobile changes the game. Fingers are bigger than cursors, and gestures happen fast. That’s great for speed and terrible for accidents. If your app supports swipe to archive, you need extra care, because a swipe is far easier to trigger by mistake than a tap. Here’s what Gmail has done, and what you can borrow for your own product.

What Gmail Gets Right

Gmail lets people customize swipes. When customizable swipes reached iPhones in 2019, TechSpot reported that you can map a swipe to archive, trash, mark read or unread, snooze, or move. That’s smart, because someone chasing inbox zero can choose what feels natural. And if the inbox itself is the problem, an AI email assistant can sort the noise before you ever need to archive it.

Gmail on Android also added small touches. 9to5Google reports animated icons that confirm each action (the archive arrow slides into a box) plus vibration feedback meant to prevent accidental swipes.

Steal those ideas. Confirm the action visually, add subtle feedback, and always pair the swipe with an undo toast.

Archive Buttons Beyond Email

Archiving isn’t just an email thing. Task managers, password vaults, chat apps and photo libraries all use it, and each one bends the meaning a little. That’s why your definition matters so much. When your product sits outside email, users bring email expectations with them. So let me show you two places where those expectations collide with reality, and what you can learn from each.

Project Tools and Retention Rules

In ClickUp, per ProcessDriven’s guide, you archive a task from the three-dot menu, while a deleted task lands in the trash for 30 days. The guide’s advice is to archive when in doubt.

But watch out for company policy. As Leave Me Alone’s Outlook guide notes, work or school accounts can have retention rules that change what “archive” and “delete” really mean. If your product serves businesses, say so in the interface.

Why Archive Still Needs a Trash

One more wrinkle. In a Bitwarden community thread, users argue that archive and trash are different jobs. Their worry is that if you use “delete” to hide things, someone can empty the trash and wipe items you only meant to keep out of search.

So don’t force one control to do both. Offer archive for “keep but hide,” trash for “probably done,” and permanent delete for “never again.”

Archive Button Audit Checklist

Here’s something you can use right now. I built this checklist from the sources and failure cases above, so treat it as a practical rubric rather than an industry standard. Score each item 1 point for yes, 0 for no. It takes about five minutes, and you’ll probably spot a fix or two immediately.

Score Your Own Button

The label says “Archive,” and the behavior matches it.
The icon isn’t an X or a trash can.
The button sits in the same spot in every view.
Archive and delete are visually separated.
An undo toast appears right after archiving.
Archived items are findable by search.
There’s a visible “restore” or “move back” action.
The clickable area is at least 24×24 pixels (ideally 44×44 on mobile).
The button has an accessible name describing the action.
Bulk archiving shows one batched undo message.

Your score:

9–10: Solid. Ship it.
6–8: Good bones, but fix the gaps.
0–5: Users will lose things. Start with items 1, 5 and 7.

Archive Buttons FAQ

What does the archive button do?

It removes an item from your main view without deleting it. The item stays in your account and can be found through search or a dedicated archive view, then restored whenever you like.

Does archiving delete emails?

No. According to Gmail Help, archived messages stay in your account under “All mail.” Microsoft says the same about its Archive folder, which isn’t auto-emptied.

How do I find archived emails in Gmail?

Open “All Mail” from the left menu, or search in:archive. Then select the message and click “Move to Inbox” to bring it back.

How do I unarchive something?

Find the item in your archive view or search results, then use the restore action (Gmail calls it “Move to Inbox”). If you just archived it, click Undo on the toast message first.

Should an archive button have a confirmation dialog?

Usually not. Archiving is reversible, so an undo toast is the better fit. NN/g recommends saving confirmations for serious, hard-to-undo actions.

What size should an archive icon button be?

WCAG 2.2 requires at least 24×24 CSS pixels for most targets, with a spacing exception. For better usability, especially on phones, aim for 44×44.

Final Thoughts on Archive Buttons

Let’s wrap this up. Archive buttons seem tiny, but they carry real trust. When one works the way people expect, nobody notices. When one deletes data or hides it forever, people remember.

A clear label, a familiar icon, a fixed position, an undo toast, an easy restore path and a properly sized target solve almost every complaint I’ve shown you. And the audit checklist above will tell you where to start.

Pick one item and fix it this week.

Your users will never thank you for a good archive button.

They’ll just stop losing things.

That’s the win.