# Component 45 component, cùng dựng trên một bộ token. Mở từng cái để xem ở chế độ sáng và tối, các prop và cách cài. ## Hành động - [Button](https://werewolf-ui.vercel.app/vi/components/button.md): Triggers an action. - [DropdownMenu](https://werewolf-ui.vercel.app/vi/components/dropdown-menu.md): A menu of actions behind a button: DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem (destructive, inset, leadingIcon, shortcut, asChild), DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal. - [Toggle](https://werewolf-ui.vercel.app/vi/components/toggle.md): A button with a persistent on or off state. - [ToggleGroup](https://werewolf-ui.vercel.app/vi/components/toggle-group.md): A keyboard-navigable group of single or multiple toggle choices. ## Form - [Calendar](https://werewolf-ui.vercel.app/vi/components/calendar.md): A month grid for picking one date inline. - [Checkbox](https://werewolf-ui.vercel.app/vi/components/checkbox.md): A 16px box that turns one option on or off, or shows partly on (indeterminate). - [ColorPicker](https://werewolf-ui.vercel.app/vi/components/color-picker.md): Picks a color from a 2D saturation and brightness area, a hue bar and a hex field, in a Popover. - [Combobox](https://werewolf-ui.vercel.app/vi/components/combobox.md): Picks one value from a long list by typing to filter it: Combobox (value, defaultValue, onValueChange, open, emptyText, placeholder, size, name) with ComboboxItem and ComboboxGroup children. - [DatePicker](https://werewolf-ui.vercel.app/vi/components/date-picker.md): A field-looking trigger that opens a Calendar in a Popover, for picking one date in a form. - [Field](https://werewolf-ui.vercel.app/vi/components/field.md): One form field: FieldLabel, FieldControl, FieldDescription and FieldError, with the ids linked and required, disabled and invalid set once. - [Input](https://werewolf-ui.vercel.app/vi/components/input.md): Single-line text field. - [Label](https://werewolf-ui.vercel.app/vi/components/label.md): Visible name of a form control, with an optional required marker or "(optional)" note, and an optional info button with a tooltip. - [RadioGroup](https://werewolf-ui.vercel.app/vi/components/radio-group.md): One choice out of a few options: RadioGroup with RadioGroupItem, each with a label and an optional description. - [Select](https://werewolf-ui.vercel.app/vi/components/select.md): Picks one value from a list. - [Slider](https://werewolf-ui.vercel.app/vi/components/slider.md): Picks a number, or a range of two, by dragging a thumb: one thumb per value. - [Switch](https://werewolf-ui.vercel.app/vi/components/switch.md): Turns a setting on or off at once. - [Textarea](https://werewolf-ui.vercel.app/vi/components/textarea.md): Text field over several lines, with Input's look and states. - [Tokenizer](https://werewolf-ui.vercel.app/vi/components/tokenizer.md): A field that collects several short values as Tokens: Enter or a comma adds one, Backspace removes the last. ## Overlay - [AlertDialog](https://werewolf-ui.vercel.app/vi/components/alert-dialog.md): Confirmation for a destructive action: Dialog's look, focus on Cancel, no close on a scrim click. - [Command](https://werewolf-ui.vercel.app/vi/components/command.md): Searches and runs actions inline or in a dialog. - [Dialog](https://werewolf-ui.vercel.app/vi/components/dialog.md): Modal dialog with scrim and focus trap. - [Popover](https://werewolf-ui.vercel.app/vi/components/popover.md): A panel anchored to its trigger for a short form, filters or a share link: Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose. - [Sheet](https://werewolf-ui.vercel.app/vi/components/sheet.md): A dialog that slides in from an edge: Sheet, SheetTrigger, SheetContent (side: top, right, bottom, left; size: sm, md, lg, full; showCloseButton), SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose. - [Toast](https://werewolf-ui.vercel.app/vi/components/toast.md): A short message after an action, in the corner of the screen: mount one Toaster at the root and call toast({ title, description, variant, action, duration }). - [Tooltip](https://werewolf-ui.vercel.app/vi/components/tooltip.md): Short text hint for the element it wraps, on hover and keyboard focus: . ## Điều hướng - [Breadcrumb](https://werewolf-ui.vercel.app/vi/components/breadcrumb.md): The path to the current page: Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink (asChild), BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis. - [Link](https://werewolf-ui.vercel.app/vi/components/link.md): An underlined destination with optional external indicator. - [Pagination](https://werewolf-ui.vercel.app/vi/components/pagination.md): Moves between pages: Pagination with page, pageCount, siblingCount and getHref (links) or onPageChange (buttons); or PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis for your own layout. - [Sidebar](https://werewolf-ui.vercel.app/vi/components/sidebar.md): App shell navigation: SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarSection, SidebarItem, SidebarTrigger. - [Tabs](https://werewolf-ui.vercel.app/vi/components/tabs.md): Switches between panels in place. ## Bố cục - [Accordion](https://werewolf-ui.vercel.app/vi/components/accordion.md): Sections that open in place: Accordion (type single or multiple, collapsible, headingLevel), AccordionItem, AccordionTrigger, AccordionContent. - [Card](https://werewolf-ui.vercel.app/vi/components/card.md): Bordered surface for grouping related content. - [Separator](https://werewolf-ui.vercel.app/vi/components/separator.md): A 1px line that splits content into groups. ## Hiển thị dữ liệu - [Avatar](https://werewolf-ui.vercel.app/vi/components/avatar.md): A person, team or workspace as a photo, or one or two initials on a hue pair when there is no photo. - [Badge](https://werewolf-ui.vercel.app/vi/components/badge.md): Compact status or category label. - [Image](https://werewolf-ui.vercel.app/vi/components/image.md): Displays an image in a frame that keeps its size, with a blurred placeholder that the full image fades in over. - [Kbd](https://werewolf-ui.vercel.app/vi/components/kbd.md): Displays a keyboard shortcut or key sequence. - [Metadata](https://werewolf-ui.vercel.app/vi/components/metadata.md): Read-only label and value pairs in a description list: . - [Table](https://werewolf-ui.vercel.app/vi/components/table.md): Rows of data: Table, TableHeader, TableBody, TableFooter, TableRow (selected), TableHead (align, numeric, fit, sortDirection, onSort), TableCell (align, numeric, fit), TableCaption, TableEmpty, and TableToolbar with TableActions for the bars above and below. - [Token](https://werewolf-ui.vercel.app/vi/components/token.md): Pill that names a token or short machine value, on a soft hue pair (pink by default), with an optional 12px icon, color swatch or 16px avatar, and an optional remove button (onRemove, removeLabel). ## Trạng thái - [Alert](https://werewolf-ui.vercel.app/vi/components/alert.md): An inline named message with optional action and dismissal. - [EmptyState](https://werewolf-ui.vercel.app/vi/components/empty-state.md): Explains an empty successful result and its next action. - [Progress](https://werewolf-ui.vercel.app/vi/components/progress.md): A bar for how much of a task is done; no value makes it indeterminate. - [Skeleton](https://werewolf-ui.vercel.app/vi/components/skeleton.md): A gray block that holds the place of content while it loads. - [Spinner](https://werewolf-ui.vercel.app/vi/components/spinner.md): A turning arc for work of unknown length, with a visually hidden label.