UI Components
Smile provides a library of built-in lower-level components which are styled and themed to match the overall project. These components build on Radix-Vue and Shadcn-vue and help you quickly develop consistent interfaces with themed colors, dark mode support, and a consistent look and feel. We anticipate adding more here over time.
Importing Components
All UIkit components can be imported from the @/uikit/components directory. The full list of available components is in the file. Most are in fact imported from Shadcn-vue, but some have been extended for use in Smile and are documented here:
import { Badge } from '@/uikit/components/badge'
import { Button } from '@/uikit/components/button'
import { ButtonGroup, ButtonGroupItem } from '@/uikit/components/button-group'
import { Checkbox } from '@/uikit/components/checkbox'
import { Switch } from '@/uikit/components/switch'Button Component
The Button component is the primary interactive element for user actions. It supports various styles, sizes, and can include icons.
There are also many color variants controlled by the main Tailwind theme sheet (src/core/main.css).
There are also many sizes:
Buttons can include icons alongside text. Icons should ideally be placed before the text content:
Making Buttons Clickable
There are two main ways to make buttons interactive:
1. Using onClick Handler
For simple click actions, you can add an @click handler directly to the button:
<Button @click="handleClick" variant="primary">
Click Me
</Button>2. Using asChild with Anchor Tags
For navigation or external links, you can use the asChild prop with an anchor tag in the slot:
<Button asChild variant="primary">
<a href="/some-page">Navigate to Page</a>
</Button>This approach is useful for:
- Internal navigation
- External links
- Download links
- Any scenario where you need the button to behave like a link
The asChild prop tells the Button component to render its children as the root element instead of a <button> tag, allowing you to use anchor tags while maintaining the button's styling.
Props
variant (string): The visual style variant can be default, destructive, outline, secondary, ghost, link, primary, primary-light, button-link, button-link-light, info, info-light, success, success-light, warning, warning-light, danger, or danger-light.
size (string): The button size can be icon for icon-only buttons without text or menu for menu-style buttons. Other standard sizes are also available.
ButtonGroup Component
The ButtonGroup component creates a connected group of buttons, useful for related actions or options.
ButtonGroup supports different sizes:
Props
variant (string): The visual style variant (same as Button component)
size (string): The button size (same as Button component)
Checkbox Component
The Checkbox component provides a standard checkbox input with various styling options.
Props
modelValue (boolean): The checked state (use v-model for two-way binding)
variant (string): The visual style variant can be default, primary, info, success, warning, or danger.
size (string): The checkbox size can be xs, sm, default, lg, or xl.
disabled (boolean): Whether the checkbox is disabled
Switch Component
The Switch component provides a toggle switch input, ideal for on/off states.
Props
modelValue (boolean): The checked state (use v-model for two-way binding)
variant (string): The visual style variant can be default, primary, info, success, warning, or danger.
size (string): The switch size can be sm, default, lg, or xl.
disabled (boolean): Whether the switch is disabled
Badge Component
The Badge component is used to display small pieces of information, such as status indicators, labels, or counts.
Props
variant (string): The visual style variant can be default, secondary, destructive, or outline.