# Common Component Patterns Quick copy-paste patterns for frequent UI components. ## 🔘 Buttons ### Primary CTA Button ```vue ``` ### Secondary/Outline Button ```vue ``` ### Icon Button (Accessible) ```vue ``` --- ## 📋 Cards ### Glass Card (Primary Style) ```vue Card Title Card description content goes here. ``` ### Flat Card (Secondary Style) ```vue Information ``` ### Interactive Card (Clickable) ```vue Clickable Card ``` --- ## 📝 Forms ### Form Input (Accessible) ```vue {{ errors.email }} ``` ### Select/Dropdown ```vue ``` ### Checkbox (Accessible) ```vue ``` --- ## 🧭 Navigation ### Floating Top Navbar ```vue GT Agent ``` ### Bottom Navigation (Safe Area) ```vue ``` ### Breadcrumbs ```vue ``` --- ## 📊 Data Display ### List Item (Interactive) ```vue {{ item.title }} {{ item.subtitle }} ``` ### Badge/Tag ```vue {{ statusText }} ``` ### Empty State ```vue 暂无数据 当前没有可显示的内容 ``` --- ## ⚡ Loading States ### Skeleton Loader ```vue ``` ### Loading Spinner ```vue 加载中... 加载中... ``` --- ## 🔔 Alerts & Toasts ### Alert Box ```vue {{ title }} {{ message }} ``` --- ## 🎨 Modal/Dialog ### Modal Overlay ```vue Modal Title Modal content goes here. ``` --- ## 📐 Layout Utilities ### Container ```vue ``` ### Responsive Grid ```vue ``` ### Flex Layouts ```vue
Item 1
Item 2
Item 1
Item 2
Left
Right
Centered content
 ``` --- **Full Documentation**: See `.claude/DESIGN-SYSTEM.md`