vue-practice/CHALLENGE.md

Mock challenge: BaseButton component

Build a reusable Vue 3 button component suitable for a design system. Focus on API design, accessibility, and Vue 3 best practices.

Suggested time: 25–35 minutes

---

Core requirements

• Accept a variant prop: primary, secondary, danger — each should have visually distinct styles
• Accept a size prop: sm, md, lg — affects padding and font size
• Accept a disabled prop — visually and functionally disables the button
• Accept a loading prop — shows a loading indicator and prevents interaction
• Use a default slot for button label content
• Explicitly declare a click emit

---

Accessibility requirements

• Use a native <button> element — not a <div>
• When loading is true, set aria-busy="true" and aria-disabled="true"
• When disabled is true, use the native disabled attribute (not just styling)
• Ensure visible focus styles are not removed — outline: none without a replacement is a fail

---

Bonus points

• Add an optional icon slot for a leading icon
• Type all props with TypeScript
• Add a full-width prop that makes the button width: 100%
• Write at least one Vitest unit test — e.g. that the click event does not fire when disabled

---

Things they'll be watching for

• Do you use defineProps and defineEmits correctly with script setup syntax?
• Do you use a computed to derive CSS classes from props, or inline ternaries everywhere?
• Do you handle the loading state gracefully — preventing double-clicks, communicating state to screen readers?
• Do you narrate your thinking as you go?

Tip: Before writing any code, spend 1–2 minutes talking through your approach out loud. Interviewers value reasoning over speed.