# Icons
URL: /docs/icons
@vapor-ui/icons 라이브러리에서 제공하는 아이콘입니다.
아이콘을 클릭해 import 문을 복사할 수 있습니다.
## Basic Icons
| Icon Name | Import Statement |
| --------------------------- | ------------------------------------------------------------- |
| `AchievementIcon` | `import { AchievementIcon } from '@vapor-ui/icons'` |
| `AddUserIcon` | `import { AddUserIcon } from '@vapor-ui/icons'` |
| `AiGoormeeIcon` | `import { AiGoormeeIcon } from '@vapor-ui/icons'` |
| `AiSmartieIcon` | `import { AiSmartieIcon } from '@vapor-ui/icons'` |
| `AirplayIcon` | `import { AirplayIcon } from '@vapor-ui/icons'` |
| `AlgorithmIcon` | `import { AlgorithmIcon } from '@vapor-ui/icons'` |
| `AppleIcon` | `import { AppleIcon } from '@vapor-ui/icons'` |
| `ArrowDownCircleIcon` | `import { ArrowDownCircleIcon } from '@vapor-ui/icons'` |
| `AssignmentIcon` | `import { AssignmentIcon } from '@vapor-ui/icons'` |
| `AwsIcon` | `import { AwsIcon } from '@vapor-ui/icons'` |
| `AzureIcon` | `import { AzureIcon } from '@vapor-ui/icons'` |
| `BedIcon` | `import { BedIcon } from '@vapor-ui/icons'` |
| `BellOffIcon` | `import { BellOffIcon } from '@vapor-ui/icons'` |
| `BellOnIcon` | `import { BellOnIcon } from '@vapor-ui/icons'` |
| `BitbucketIcon` | `import { BitbucketIcon } from '@vapor-ui/icons'` |
| `BlogColorIcon` | `import { BlogColorIcon } from '@vapor-ui/icons'` |
| `BlogIcon` | `import { BlogIcon } from '@vapor-ui/icons'` |
| `BookIcon` | `import { BookIcon } from '@vapor-ui/icons'` |
| `BookmarkIcon` | `import { BookmarkIcon } from '@vapor-ui/icons'` |
| `BottomPlayerIcon` | `import { BottomPlayerIcon } from '@vapor-ui/icons'` |
| `BranchIcon` | `import { BranchIcon } from '@vapor-ui/icons'` |
| `BreakpointIcon` | `import { BreakpointIcon } from '@vapor-ui/icons'` |
| `BuildIcon` | `import { BuildIcon } from '@vapor-ui/icons'` |
| `CafeIcon` | `import { CafeIcon } from '@vapor-ui/icons'` |
| `CakeIcon` | `import { CakeIcon } from '@vapor-ui/icons'` |
| `CalculatorIcon` | `import { CalculatorIcon } from '@vapor-ui/icons'` |
| `CalendarIcon` | `import { CalendarIcon } from '@vapor-ui/icons'` |
| `CallIcon` | `import { CallIcon } from '@vapor-ui/icons'` |
| `CameraIcon` | `import { CameraIcon } from '@vapor-ui/icons'` |
| `CampIcon` | `import { CampIcon } from '@vapor-ui/icons'` |
| `CaptionIcon` | `import { CaptionIcon } from '@vapor-ui/icons'` |
| `CarIcon` | `import { CarIcon } from '@vapor-ui/icons'` |
| `CardsIcon` | `import { CardsIcon } from '@vapor-ui/icons'` |
| `CaretDownIcon` | `import { CaretDownIcon } from '@vapor-ui/icons'` |
| `CaretLeftIcon` | `import { CaretLeftIcon } from '@vapor-ui/icons'` |
| `CaretRightIcon` | `import { CaretRightIcon } from '@vapor-ui/icons'` |
| `CaretUpIcon` | `import { CaretUpIcon } from '@vapor-ui/icons'` |
| `CertificateIcon` | `import { CertificateIcon } from '@vapor-ui/icons'` |
| `ChapterIcon` | `import { ChapterIcon } from '@vapor-ui/icons'` |
| `ChartPieIcon` | `import { ChartPieIcon } from '@vapor-ui/icons'` |
| `ChatgptIcon` | `import { ChatgptIcon } from '@vapor-ui/icons'` |
| `CheckCircleIcon` | `import { CheckCircleIcon } from '@vapor-ui/icons'` |
| `CheckboxIcon` | `import { CheckboxIcon } from '@vapor-ui/icons'` |
| `ChromeColorIcon` | `import { ChromeColorIcon } from '@vapor-ui/icons'` |
| `ChromeIcon` | `import { ChromeIcon } from '@vapor-ui/icons'` |
| `ClassIcon` | `import { ClassIcon } from '@vapor-ui/icons'` |
| `CodeBlockIcon` | `import { CodeBlockIcon } from '@vapor-ui/icons'` |
| `CodevisorIcon` | `import { CodevisorIcon } from '@vapor-ui/icons'` |
| `CollaborationIcon` | `import { CollaborationIcon } from '@vapor-ui/icons'` |
| `ComponentIcon` | `import { ComponentIcon } from '@vapor-ui/icons'` |
| `ContainerIcon` | `import { ContainerIcon } from '@vapor-ui/icons'` |
| `ContainerRunIcon` | `import { ContainerRunIcon } from '@vapor-ui/icons'` |
| `ContainerShareIcon` | `import { ContainerShareIcon } from '@vapor-ui/icons'` |
| `ContainerStopIcon` | `import { ContainerStopIcon } from '@vapor-ui/icons'` |
| `ContainerToImageIcon` | `import { ContainerToImageIcon } from '@vapor-ui/icons'` |
| `ControlCommonIcon` | `import { ControlCommonIcon } from '@vapor-ui/icons'` |
| `CopyIcon` | `import { CopyIcon } from '@vapor-ui/icons'` |
| `CouponIcon` | `import { CouponIcon } from '@vapor-ui/icons'` |
| `CourseHistoryIcon` | `import { CourseHistoryIcon } from '@vapor-ui/icons'` |
| `CourseIcon` | `import { CourseIcon } from '@vapor-ui/icons'` |
| `CpuIcon` | `import { CpuIcon } from '@vapor-ui/icons'` |
| `CreditCardIcon` | `import { CreditCardIcon } from '@vapor-ui/icons'` |
| `CursorshareoffIcon` | `import { CursorshareoffIcon } from '@vapor-ui/icons'` |
| `CursorshareonIcon` | `import { CursorshareonIcon } from '@vapor-ui/icons'` |
| `DarkIcon` | `import { DarkIcon } from '@vapor-ui/icons'` |
| `DashboardIcon` | `import { DashboardIcon } from '@vapor-ui/icons'` |
| `DatabaseIcon` | `import { DatabaseIcon } from '@vapor-ui/icons'` |
| `DebugContinueIcon` | `import { DebugContinueIcon } from '@vapor-ui/icons'` |
| `DebugIcon` | `import { DebugIcon } from '@vapor-ui/icons'` |
| `DeployPushIcon` | `import { DeployPushIcon } from '@vapor-ui/icons'` |
| `DetailViewIcon` | `import { DetailViewIcon } from '@vapor-ui/icons'` |
| `DiscIcon` | `import { DiscIcon } from '@vapor-ui/icons'` |
| `DiscordColorIcon` | `import { DiscordColorIcon } from '@vapor-ui/icons'` |
| `DiscordIcon` | `import { DiscordIcon } from '@vapor-ui/icons'` |
| `DiscussionIcon` | `import { DiscussionIcon } from '@vapor-ui/icons'` |
| `DiskIcon` | `import { DiskIcon } from '@vapor-ui/icons'` |
| `DislikeIcon` | `import { DislikeIcon } from '@vapor-ui/icons'` |
| `DislikeThumbIcon` | `import { DislikeThumbIcon } from '@vapor-ui/icons'` |
| `DividerIcon` | `import { DividerIcon } from '@vapor-ui/icons'` |
| `DockerIcon` | `import { DockerIcon } from '@vapor-ui/icons'` |
| `DocumentViewerIcon` | `import { DocumentViewerIcon } from '@vapor-ui/icons'` |
| `DotIcon` | `import { DotIcon } from '@vapor-ui/icons'` |
| `DownloadIcon` | `import { DownloadIcon } from '@vapor-ui/icons'` |
| `DragIndicatorIcon` | `import { DragIndicatorIcon } from '@vapor-ui/icons'` |
| `EditIcon` | `import { EditIcon } from '@vapor-ui/icons'` |
| `EraserIcon` | `import { EraserIcon } from '@vapor-ui/icons'` |
| `ErrorCircleIcon` | `import { ErrorCircleIcon } from '@vapor-ui/icons'` |
| `ExamIcon` | `import { ExamIcon } from '@vapor-ui/icons'` |
| `ExamListIcon` | `import { ExamListIcon } from '@vapor-ui/icons'` |
| `ExamReportIcon` | `import { ExamReportIcon } from '@vapor-ui/icons'` |
| `ExploreIcon` | `import { ExploreIcon } from '@vapor-ui/icons'` |
| `ExportIcon` | `import { ExportIcon } from '@vapor-ui/icons'` |
| `ExportImageIcon` | `import { ExportImageIcon } from '@vapor-ui/icons'` |
| `FacebookColorIcon` | `import { FacebookColorIcon } from '@vapor-ui/icons'` |
| `FacebookIcon` | `import { FacebookIcon } from '@vapor-ui/icons'` |
| `FigmaColorIcon` | `import { FigmaColorIcon } from '@vapor-ui/icons'` |
| `FigmaIcon` | `import { FigmaIcon } from '@vapor-ui/icons'` |
| `FileAddIcon` | `import { FileAddIcon } from '@vapor-ui/icons'` |
| `FileDeleteIcon` | `import { FileDeleteIcon } from '@vapor-ui/icons'` |
| `FileIcon` | `import { FileIcon } from '@vapor-ui/icons'` |
| `FilenewIcon` | `import { FilenewIcon } from '@vapor-ui/icons'` |
| `FilterIcon` | `import { FilterIcon } from '@vapor-ui/icons'` |
| `FirefoxColorIcon` | `import { FirefoxColorIcon } from '@vapor-ui/icons'` |
| `FlagIcon` | `import { FlagIcon } from '@vapor-ui/icons'` |
| `FlaskIcon` | `import { FlaskIcon } from '@vapor-ui/icons'` |
| `FlightIcon` | `import { FlightIcon } from '@vapor-ui/icons'` |
| `FoldIcon` | `import { FoldIcon } from '@vapor-ui/icons'` |
| `FolderIcon` | `import { FolderIcon } from '@vapor-ui/icons'` |
| `FolderNewIcon` | `import { FolderNewIcon } from '@vapor-ui/icons'` |
| `FolderSearchIcon` | `import { FolderSearchIcon } from '@vapor-ui/icons'` |
| `ForkIcon` | `import { ForkIcon } from '@vapor-ui/icons'` |
| `FunctionIcon` | `import { FunctionIcon } from '@vapor-ui/icons'` |
| `GameIcon` | `import { GameIcon } from '@vapor-ui/icons'` |
| `GcpIcon` | `import { GcpIcon } from '@vapor-ui/icons'` |
| `GitIcon` | `import { GitIcon } from '@vapor-ui/icons'` |
| `GithubColorIcon` | `import { GithubColorIcon } from '@vapor-ui/icons'` |
| `GithubIcon` | `import { GithubIcon } from '@vapor-ui/icons'` |
| `GitlabIcon` | `import { GitlabIcon } from '@vapor-ui/icons'` |
| `GoogleCalendarIcon` | `import { GoogleCalendarIcon } from '@vapor-ui/icons'` |
| `GoogleColorIcon` | `import { GoogleColorIcon } from '@vapor-ui/icons'` |
| `GoogleDrawingIcon` | `import { GoogleDrawingIcon } from '@vapor-ui/icons'` |
| `GoogleIcon` | `import { GoogleIcon } from '@vapor-ui/icons'` |
| `GooglePresentationIcon` | `import { GooglePresentationIcon } from '@vapor-ui/icons'` |
| `GoogleSpreadsheetIcon` | `import { GoogleSpreadsheetIcon } from '@vapor-ui/icons'` |
| `GoormduinoIcon` | `import { GoormduinoIcon } from '@vapor-ui/icons'` |
| `GpuIcon` | `import { GpuIcon } from '@vapor-ui/icons'` |
| `GroupIcon` | `import { GroupIcon } from '@vapor-ui/icons'` |
| `GuestIcon` | `import { GuestIcon } from '@vapor-ui/icons'` |
| `HeartIcon` | `import { HeartIcon } from '@vapor-ui/icons'` |
| `HelpCircleIcon` | `import { HelpCircleIcon } from '@vapor-ui/icons'` |
| `HelpIcon` | `import { HelpIcon } from '@vapor-ui/icons'` |
| `HighlightViewIcon` | `import { HighlightViewIcon } from '@vapor-ui/icons'` |
| `HomeIcon` | `import { HomeIcon } from '@vapor-ui/icons'` |
| `HourglassIcon` | `import { HourglassIcon } from '@vapor-ui/icons'` |
| `IdCardIcon` | `import { IdCardIcon } from '@vapor-ui/icons'` |
| `IdeShareIcon` | `import { IdeShareIcon } from '@vapor-ui/icons'` |
| `ImageIcon` | `import { ImageIcon } from '@vapor-ui/icons'` |
| `ImagePackIcon` | `import { ImagePackIcon } from '@vapor-ui/icons'` |
| `ImageToContainerIcon` | `import { ImageToContainerIcon } from '@vapor-ui/icons'` |
| `ImportIcon` | `import { ImportIcon } from '@vapor-ui/icons'` |
| `InfoCircleIcon` | `import { InfoCircleIcon } from '@vapor-ui/icons'` |
| `InstagramColorIcon` | `import { InstagramColorIcon } from '@vapor-ui/icons'` |
| `InstagramIcon` | `import { InstagramIcon } from '@vapor-ui/icons'` |
| `IntelliSenseClassIcon` | `import { IntelliSenseClassIcon } from '@vapor-ui/icons'` |
| `IntelliSenseColorIcon` | `import { IntelliSenseColorIcon } from '@vapor-ui/icons'` |
| `IntelliSenseConstantIcon` | `import { IntelliSenseConstantIcon } from '@vapor-ui/icons'` |
| `IntelliSenseEnumIcon` | `import { IntelliSenseEnumIcon } from '@vapor-ui/icons'` |
| `IntelliSenseEventIcon` | `import { IntelliSenseEventIcon } from '@vapor-ui/icons'` |
| `IntelliSenseFunctionIcon` | `import { IntelliSenseFunctionIcon } from '@vapor-ui/icons'` |
| `IntelliSenseInterfaceIcon` | `import { IntelliSenseInterfaceIcon } from '@vapor-ui/icons'` |
| `IntelliSenseModuleIcon` | `import { IntelliSenseModuleIcon } from '@vapor-ui/icons'` |
| `IntelliSenseNullIcon` | `import { IntelliSenseNullIcon } from '@vapor-ui/icons'` |
| `IntelliSenseOperatorIcon` | `import { IntelliSenseOperatorIcon } from '@vapor-ui/icons'` |
| `IntelliSensePropertyIcon` | `import { IntelliSensePropertyIcon } from '@vapor-ui/icons'` |
| `IntelliSenseSnippetIcon` | `import { IntelliSenseSnippetIcon } from '@vapor-ui/icons'` |
| `IntelliSenseStructureIcon` | `import { IntelliSenseStructureIcon } from '@vapor-ui/icons'` |
| `IntelliSenseTextIcon` | `import { IntelliSenseTextIcon } from '@vapor-ui/icons'` |
| `IntelliSenseUnitIcon` | `import { IntelliSenseUnitIcon } from '@vapor-ui/icons'` |
| `IntelliSenseValueIcon` | `import { IntelliSenseValueIcon } from '@vapor-ui/icons'` |
| `IntellijColorIcon` | `import { IntellijColorIcon } from '@vapor-ui/icons'` |
| `ItalicIcon` | `import { ItalicIcon } from '@vapor-ui/icons'` |
| `JiraIcon` | `import { JiraIcon } from '@vapor-ui/icons'` |
| `JupyterColorIcon` | `import { JupyterColorIcon } from '@vapor-ui/icons'` |
| `JupyterlabColorIcon` | `import { JupyterlabColorIcon } from '@vapor-ui/icons'` |
| `JupyterlabIcon` | `import { JupyterlabIcon } from '@vapor-ui/icons'` |
| `KakaoIcon` | `import { KakaoIcon } from '@vapor-ui/icons'` |
| `KeyboardIcon` | `import { KeyboardIcon } from '@vapor-ui/icons'` |
| `KeyboardTabIcon` | `import { KeyboardTabIcon } from '@vapor-ui/icons'` |
| `KidIcon` | `import { KidIcon } from '@vapor-ui/icons'` |
| `KrampolineIcon` | `import { KrampolineIcon } from '@vapor-ui/icons'` |
| `KubernatesIcon` | `import { KubernatesIcon } from '@vapor-ui/icons'` |
| `LightIcon` | `import { LightIcon } from '@vapor-ui/icons'` |
| `LightbulbIcon` | `import { LightbulbIcon } from '@vapor-ui/icons'` |
| `LightningIcon` | `import { LightningIcon } from '@vapor-ui/icons'` |
| `LikeIcon` | `import { LikeIcon } from '@vapor-ui/icons'` |
| `LikeThumbIcon` | `import { LikeThumbIcon } from '@vapor-ui/icons'` |
| `LinkedinIcon` | `import { LinkedinIcon } from '@vapor-ui/icons'` |
| `ListIcon` | `import { ListIcon } from '@vapor-ui/icons'` |
| `ListNumberedIcon` | `import { ListNumberedIcon } from '@vapor-ui/icons'` |
| `LiveLessonIcon` | `import { LiveLessonIcon } from '@vapor-ui/icons'` |
| `LocationIcon` | `import { LocationIcon } from '@vapor-ui/icons'` |
| `LockIcon` | `import { LockIcon } from '@vapor-ui/icons'` |
| `MagicWandIcon` | `import { MagicWandIcon } from '@vapor-ui/icons'` |
| `MailIcon` | `import { MailIcon } from '@vapor-ui/icons'` |
| `MarkModeIcon` | `import { MarkModeIcon } from '@vapor-ui/icons'` |
| `MarkdownIcon` | `import { MarkdownIcon } from '@vapor-ui/icons'` |
| `MemoIcon` | `import { MemoIcon } from '@vapor-ui/icons'` |
| `MemoryIcon` | `import { MemoryIcon } from '@vapor-ui/icons'` |
| `MessageIcon` | `import { MessageIcon } from '@vapor-ui/icons'` |
| `MethodIcon` | `import { MethodIcon } from '@vapor-ui/icons'` |
| `MicOffIcon` | `import { MicOffIcon } from '@vapor-ui/icons'` |
| `MicOnIcon` | `import { MicOnIcon } from '@vapor-ui/icons'` |
| `MinusBoxIcon` | `import { MinusBoxIcon } from '@vapor-ui/icons'` |
| `MovieIcon` | `import { MovieIcon } from '@vapor-ui/icons'` |
| `MysqlColorIcon` | `import { MysqlColorIcon } from '@vapor-ui/icons'` |
| `MysqlIcon` | `import { MysqlIcon } from '@vapor-ui/icons'` |
| `NaverIcon` | `import { NaverIcon } from '@vapor-ui/icons'` |
| `NaverblogColorIcon` | `import { NaverblogColorIcon } from '@vapor-ui/icons'` |
| `NaverblogIcon` | `import { NaverblogIcon } from '@vapor-ui/icons'` |
| `NetworkIcon` | `import { NetworkIcon } from '@vapor-ui/icons'` |
| `NextIcon` | `import { NextIcon } from '@vapor-ui/icons'` |
| `NoImageIcon` | `import { NoImageIcon } from '@vapor-ui/icons'` |
| `NoUserIcon` | `import { NoUserIcon } from '@vapor-ui/icons'` |
| `NoticeBoardIcon` | `import { NoticeBoardIcon } from '@vapor-ui/icons'` |
| `NoticeCircleIcon` | `import { NoticeCircleIcon } from '@vapor-ui/icons'` |
| `NotionIcon` | `import { NotionIcon } from '@vapor-ui/icons'` |
| `ObjectIcon` | `import { ObjectIcon } from '@vapor-ui/icons'` |
| `OpenFileIcon` | `import { OpenFileIcon } from '@vapor-ui/icons'` |
| `OpenFolderIcon` | `import { OpenFolderIcon } from '@vapor-ui/icons'` |
| `OperaColorIcon` | `import { OperaColorIcon } from '@vapor-ui/icons'` |
| `OrganizationIcon` | `import { OrganizationIcon } from '@vapor-ui/icons'` |
| `PanelOpenIcon` | `import { PanelOpenIcon } from '@vapor-ui/icons'` |
| `ParentsIcon` | `import { ParentsIcon } from '@vapor-ui/icons'` |
| `PauseIcon` | `import { PauseIcon } from '@vapor-ui/icons'` |
| `PaycoIcon` | `import { PaycoIcon } from '@vapor-ui/icons'` |
| `PaypalColorIcon` | `import { PaypalColorIcon } from '@vapor-ui/icons'` |
| `PcIcon` | `import { PcIcon } from '@vapor-ui/icons'` |
| `PdfIcon` | `import { PdfIcon } from '@vapor-ui/icons'` |
| `PhoneIcon` | `import { PhoneIcon } from '@vapor-ui/icons'` |
| `PinSetIcon` | `import { PinSetIcon } from '@vapor-ui/icons'` |
| `PipetteIcon` | `import { PipetteIcon } from '@vapor-ui/icons'` |
| `PlansIcon` | `import { PlansIcon } from '@vapor-ui/icons'` |
| `PlayIcon` | `import { PlayIcon } from '@vapor-ui/icons'` |
| `PlugInIcon` | `import { PlugInIcon } from '@vapor-ui/icons'` |
| `PlugOutIcon` | `import { PlugOutIcon } from '@vapor-ui/icons'` |
| `PlusBoxIcon` | `import { PlusBoxIcon } from '@vapor-ui/icons'` |
| `PortforwardingIcon` | `import { PortforwardingIcon } from '@vapor-ui/icons'` |
| `PowerIcon` | `import { PowerIcon } from '@vapor-ui/icons'` |
| `PreIcon` | `import { PreIcon } from '@vapor-ui/icons'` |
| `PresentScreenIcon` | `import { PresentScreenIcon } from '@vapor-ui/icons'` |
| `PreviewIcon` | `import { PreviewIcon } from '@vapor-ui/icons'` |
| `PrintIcon` | `import { PrintIcon } from '@vapor-ui/icons'` |
| `ProductHuntColorIcon` | `import { ProductHuntColorIcon } from '@vapor-ui/icons'` |
| `ProgrammingIcon` | `import { ProgrammingIcon } from '@vapor-ui/icons'` |
| `ProjectIcon` | `import { ProjectIcon } from '@vapor-ui/icons'` |
| `ProjectOpenIcon` | `import { ProjectOpenIcon } from '@vapor-ui/icons'` |
| `ProjectSettingIcon` | `import { ProjectSettingIcon } from '@vapor-ui/icons'` |
| `PropertyIcon` | `import { PropertyIcon } from '@vapor-ui/icons'` |
| `PsychologyIcon` | `import { PsychologyIcon } from '@vapor-ui/icons'` |
| `PublishIcon` | `import { PublishIcon } from '@vapor-ui/icons'` |
| `QnAIcon` | `import { QnAIcon } from '@vapor-ui/icons'` |
| `QuoteIcon` | `import { QuoteIcon } from '@vapor-ui/icons'` |
| `ReferenceIcon` | `import { ReferenceIcon } from '@vapor-ui/icons'` |
| `RemoteIcon` | `import { RemoteIcon } from '@vapor-ui/icons'` |
| `RemoteOffIcon` | `import { RemoteOffIcon } from '@vapor-ui/icons'` |
| `ReplaceIcon` | `import { ReplaceIcon } from '@vapor-ui/icons'` |
| `ResultManagementIcon` | `import { ResultManagementIcon } from '@vapor-ui/icons'` |
| `RouteIcon` | `import { RouteIcon } from '@vapor-ui/icons'` |
| `RstudioColorIcon` | `import { RstudioColorIcon } from '@vapor-ui/icons'` |
| `RunIcon` | `import { RunIcon } from '@vapor-ui/icons'` |
| `SaveAsIcon` | `import { SaveAsIcon } from '@vapor-ui/icons'` |
| `SaveIcon` | `import { SaveIcon } from '@vapor-ui/icons'` |
| `SavingIcon` | `import { SavingIcon } from '@vapor-ui/icons'` |
| `SbomIcon` | `import { SbomIcon } from '@vapor-ui/icons'` |
| `SchoolIcon` | `import { SchoolIcon } from '@vapor-ui/icons'` |
| `SendIcon` | `import { SendIcon } from '@vapor-ui/icons'` |
| `SentryIcon` | `import { SentryIcon } from '@vapor-ui/icons'` |
| `SettingIcon` | `import { SettingIcon } from '@vapor-ui/icons'` |
| `ShareIcon` | `import { ShareIcon } from '@vapor-ui/icons'` |
| `ShoppingCartIcon` | `import { ShoppingCartIcon } from '@vapor-ui/icons'` |
| `SlackColorIcon` | `import { SlackColorIcon } from '@vapor-ui/icons'` |
| `SlackIcon` | `import { SlackIcon } from '@vapor-ui/icons'` |
| `SlotIcon` | `import { SlotIcon } from '@vapor-ui/icons'` |
| `SoundOffIcon` | `import { SoundOffIcon } from '@vapor-ui/icons'` |
| `SoundOnIcon` | `import { SoundOnIcon } from '@vapor-ui/icons'` |
| `SourcecodeIcon` | `import { SourcecodeIcon } from '@vapor-ui/icons'` |
| `SplitIcon` | `import { SplitIcon } from '@vapor-ui/icons'` |
| `SshIcon` | `import { SshIcon } from '@vapor-ui/icons'` |
| `StarIcon` | `import { StarIcon } from '@vapor-ui/icons'` |
| `StopIcon` | `import { StopIcon } from '@vapor-ui/icons'` |
| `StorageIcon` | `import { StorageIcon } from '@vapor-ui/icons'` |
| `StorybookColorIcon` | `import { StorybookColorIcon } from '@vapor-ui/icons'` |
| `StorybookIcon` | `import { StorybookIcon } from '@vapor-ui/icons'` |
| `StripeColorIcon` | `import { StripeColorIcon } from '@vapor-ui/icons'` |
| `StripeIcon` | `import { StripeIcon } from '@vapor-ui/icons'` |
| `StruckIcon` | `import { StruckIcon } from '@vapor-ui/icons'` |
| `StudentManagementIcon` | `import { StudentManagementIcon } from '@vapor-ui/icons'` |
| `SyllabusIcon` | `import { SyllabusIcon } from '@vapor-ui/icons'` |
| `TabletIcon` | `import { TabletIcon } from '@vapor-ui/icons'` |
| `TaegukColorIcon` | `import { TaegukColorIcon } from '@vapor-ui/icons'` |
| `TaegukIcon` | `import { TaegukIcon } from '@vapor-ui/icons'` |
| `TakeoffIcon` | `import { TakeoffIcon } from '@vapor-ui/icons'` |
| `TestIcon` | `import { TestIcon } from '@vapor-ui/icons'` |
| `TimeIcon` | `import { TimeIcon } from '@vapor-ui/icons'` |
| `TrashIcon` | `import { TrashIcon } from '@vapor-ui/icons'` |
| `TreeCollapseIcon` | `import { TreeCollapseIcon } from '@vapor-ui/icons'` |
| `TrelloIcon` | `import { TrelloIcon } from '@vapor-ui/icons'` |
| `TwoFileIcon` | `import { TwoFileIcon } from '@vapor-ui/icons'` |
| `UnlockIcon` | `import { UnlockIcon } from '@vapor-ui/icons'` |
| `UploadIcon` | `import { UploadIcon } from '@vapor-ui/icons'` |
| `UppercaseIcon` | `import { UppercaseIcon } from '@vapor-ui/icons'` |
| `UserCheckIcon` | `import { UserCheckIcon } from '@vapor-ui/icons'` |
| `UserIcon` | `import { UserIcon } from '@vapor-ui/icons'` |
| `UserMoveIcon` | `import { UserMoveIcon } from '@vapor-ui/icons'` |
| `UserSearchIcon` | `import { UserSearchIcon } from '@vapor-ui/icons'` |
| `VariableIcon` | `import { VariableIcon } from '@vapor-ui/icons'` |
| `VideocamOffIcon` | `import { VideocamOffIcon } from '@vapor-ui/icons'` |
| `VideocamOnIcon` | `import { VideocamOnIcon } from '@vapor-ui/icons'` |
| `ViewModuleIcon` | `import { ViewModuleIcon } from '@vapor-ui/icons'` |
| `ViewOffIcon` | `import { ViewOffIcon } from '@vapor-ui/icons'` |
| `ViewOnIcon` | `import { ViewOnIcon } from '@vapor-ui/icons'` |
| `VscodeColorIcon` | `import { VscodeColorIcon } from '@vapor-ui/icons'` |
| `VscodeIcon` | `import { VscodeIcon } from '@vapor-ui/icons'` |
| `WarningIcon` | `import { WarningIcon } from '@vapor-ui/icons'` |
| `WordMatchIcon` | `import { WordMatchIcon } from '@vapor-ui/icons'` |
| `XIcon` | `import { XIcon } from '@vapor-ui/icons'` |
| `YoutubeColorIcon` | `import { YoutubeColorIcon } from '@vapor-ui/icons'` |
| `YoutubeIcon` | `import { YoutubeIcon } from '@vapor-ui/icons'` |
## Outline Icons
| Icon Name | Import Statement |
| -------------------------------------- | ------------------------------------------------------------------------ |
| `AccessibilityOutlineIcon` | `import { AccessibilityOutlineIcon } from '@vapor-ui/icons'` |
| `AchievementOutlineIcon` | `import { AchievementOutlineIcon } from '@vapor-ui/icons'` |
| `AddCartOutlineIcon` | `import { AddCartOutlineIcon } from '@vapor-ui/icons'` |
| `AddUserOutlineIcon` | `import { AddUserOutlineIcon } from '@vapor-ui/icons'` |
| `AiGoormeeOutlineIcon` | `import { AiGoormeeOutlineIcon } from '@vapor-ui/icons'` |
| `AiSmartieOutlineIcon` | `import { AiSmartieOutlineIcon } from '@vapor-ui/icons'` |
| `AichatOutlineIcon` | `import { AichatOutlineIcon } from '@vapor-ui/icons'` |
| `AirplayOutlineIcon` | `import { AirplayOutlineIcon } from '@vapor-ui/icons'` |
| `AlgorithmOutlineIcon` | `import { AlgorithmOutlineIcon } from '@vapor-ui/icons'` |
| `AlignCenterOutlineIcon` | `import { AlignCenterOutlineIcon } from '@vapor-ui/icons'` |
| `AlignJustifyOutlineIcon` | `import { AlignJustifyOutlineIcon } from '@vapor-ui/icons'` |
| `AlignLeftOutlineIcon` | `import { AlignLeftOutlineIcon } from '@vapor-ui/icons'` |
| `AlignRightOutlineIcon` | `import { AlignRightOutlineIcon } from '@vapor-ui/icons'` |
| `AnalysisOutlineIcon` | `import { AnalysisOutlineIcon } from '@vapor-ui/icons'` |
| `ArrowDownOutlineIcon` | `import { ArrowDownOutlineIcon } from '@vapor-ui/icons'` |
| `ArrowUpOutlineIcon` | `import { ArrowUpOutlineIcon } from '@vapor-ui/icons'` |
| `AssignmentOutlineIcon` | `import { AssignmentOutlineIcon } from '@vapor-ui/icons'` |
| `AttachFileOutlineIcon` | `import { AttachFileOutlineIcon } from '@vapor-ui/icons'` |
| `AttemptOutlineIcon` | `import { AttemptOutlineIcon } from '@vapor-ui/icons'` |
| `AutoCodeOutlineIcon` | `import { AutoCodeOutlineIcon } from '@vapor-ui/icons'` |
| `BackPageOutlineIcon` | `import { BackPageOutlineIcon } from '@vapor-ui/icons'` |
| `BackUpOutlineIcon` | `import { BackUpOutlineIcon } from '@vapor-ui/icons'` |
| `BedOutlineIcon` | `import { BedOutlineIcon } from '@vapor-ui/icons'` |
| `BellOffOutlineIcon` | `import { BellOffOutlineIcon } from '@vapor-ui/icons'` |
| `BellOnOutlineIcon` | `import { BellOnOutlineIcon } from '@vapor-ui/icons'` |
| `BlankOutlineIcon` | `import { BlankOutlineIcon } from '@vapor-ui/icons'` |
| `BlockOutlineIcon` | `import { BlockOutlineIcon } from '@vapor-ui/icons'` |
| `BoldOutlineIcon` | `import { BoldOutlineIcon } from '@vapor-ui/icons'` |
| `BookOutlineIcon` | `import { BookOutlineIcon } from '@vapor-ui/icons'` |
| `BookmarkOutlineIcon` | `import { BookmarkOutlineIcon } from '@vapor-ui/icons'` |
| `BottomPlayerOutlineIcon` | `import { BottomPlayerOutlineIcon } from '@vapor-ui/icons'` |
| `BranchOutlineIcon` | `import { BranchOutlineIcon } from '@vapor-ui/icons'` |
| `BuildOutlineIcon` | `import { BuildOutlineIcon } from '@vapor-ui/icons'` |
| `BulletlistOutlineIcon` | `import { BulletlistOutlineIcon } from '@vapor-ui/icons'` |
| `CafeOutlineIcon` | `import { CafeOutlineIcon } from '@vapor-ui/icons'` |
| `CakeOutlineIcon` | `import { CakeOutlineIcon } from '@vapor-ui/icons'` |
| `CalculatorOutlineIcon` | `import { CalculatorOutlineIcon } from '@vapor-ui/icons'` |
| `CalendarOutlineIcon` | `import { CalendarOutlineIcon } from '@vapor-ui/icons'` |
| `CallOutlineIcon` | `import { CallOutlineIcon } from '@vapor-ui/icons'` |
| `CameraOutlineIcon` | `import { CameraOutlineIcon } from '@vapor-ui/icons'` |
| `CampOutlineIcon` | `import { CampOutlineIcon } from '@vapor-ui/icons'` |
| `CaptionOutlineIcon` | `import { CaptionOutlineIcon } from '@vapor-ui/icons'` |
| `CarOutlineIcon` | `import { CarOutlineIcon } from '@vapor-ui/icons'` |
| `CardsOutlineIcon` | `import { CardsOutlineIcon } from '@vapor-ui/icons'` |
| `CertificateOutlineIcon` | `import { CertificateOutlineIcon } from '@vapor-ui/icons'` |
| `ChapterOutlineIcon` | `import { ChapterOutlineIcon } from '@vapor-ui/icons'` |
| `ChartOutlineIcon` | `import { ChartOutlineIcon } from '@vapor-ui/icons'` |
| `ChartPieOutlineIcon` | `import { ChartPieOutlineIcon } from '@vapor-ui/icons'` |
| `CheckCartOutlineIcon` | `import { CheckCartOutlineIcon } from '@vapor-ui/icons'` |
| `CheckCircleOutlineIcon` | `import { CheckCircleOutlineIcon } from '@vapor-ui/icons'` |
| `ChevronDoubleLeftOutlineIcon` | `import { ChevronDoubleLeftOutlineIcon } from '@vapor-ui/icons'` |
| `ChevronDoubleRightOutlineIcon` | `import { ChevronDoubleRightOutlineIcon } from '@vapor-ui/icons'` |
| `ChevronDownOutlineIcon` | `import { ChevronDownOutlineIcon } from '@vapor-ui/icons'` |
| `ChevronLeftOutlineIcon` | `import { ChevronLeftOutlineIcon } from '@vapor-ui/icons'` |
| `ChevronRightOutlineIcon` | `import { ChevronRightOutlineIcon } from '@vapor-ui/icons'` |
| `ChevronUpOutlineIcon` | `import { ChevronUpOutlineIcon } from '@vapor-ui/icons'` |
| `CloseOutlineIcon` | `import { CloseOutlineIcon } from '@vapor-ui/icons'` |
| `CodeBlockOutlineIcon` | `import { CodeBlockOutlineIcon } from '@vapor-ui/icons'` |
| `CollaborationOutlineIcon` | `import { CollaborationOutlineIcon } from '@vapor-ui/icons'` |
| `CollapseOutlineIcon` | `import { CollapseOutlineIcon } from '@vapor-ui/icons'` |
| `CommitOutlineIcon` | `import { CommitOutlineIcon } from '@vapor-ui/icons'` |
| `ConfirmOutlineIcon` | `import { ConfirmOutlineIcon } from '@vapor-ui/icons'` |
| `ContainerOutlineIcon` | `import { ContainerOutlineIcon } from '@vapor-ui/icons'` |
| `ContainerRunOutlineIcon` | `import { ContainerRunOutlineIcon } from '@vapor-ui/icons'` |
| `ContainerShareOutlineIcon` | `import { ContainerShareOutlineIcon } from '@vapor-ui/icons'` |
| `ContainerStopOutlineIcon` | `import { ContainerStopOutlineIcon } from '@vapor-ui/icons'` |
| `ControlCommonOutlineIcon` | `import { ControlCommonOutlineIcon } from '@vapor-ui/icons'` |
| `CopyAsMarkdownOutlineIcon` | `import { CopyAsMarkdownOutlineIcon } from '@vapor-ui/icons'` |
| `CopyOutlineIcon` | `import { CopyOutlineIcon } from '@vapor-ui/icons'` |
| `CorrectOutlineIcon` | `import { CorrectOutlineIcon } from '@vapor-ui/icons'` |
| `CouponOutlineIcon` | `import { CouponOutlineIcon } from '@vapor-ui/icons'` |
| `CourseOutlineIcon` | `import { CourseOutlineIcon } from '@vapor-ui/icons'` |
| `CpuOutlineIcon` | `import { CpuOutlineIcon } from '@vapor-ui/icons'` |
| `CreateBranchOutlineIcon` | `import { CreateBranchOutlineIcon } from '@vapor-ui/icons'` |
| `CreditCardOutlineIcon` | `import { CreditCardOutlineIcon } from '@vapor-ui/icons'` |
| `DarkOutlineIcon` | `import { DarkOutlineIcon } from '@vapor-ui/icons'` |
| `DashboardOutlineIcon` | `import { DashboardOutlineIcon } from '@vapor-ui/icons'` |
| `DatabaseOutlineIcon` | `import { DatabaseOutlineIcon } from '@vapor-ui/icons'` |
| `DebugOutlineIcon` | `import { DebugOutlineIcon } from '@vapor-ui/icons'` |
| `DeployOutlineIcon` | `import { DeployOutlineIcon } from '@vapor-ui/icons'` |
| `DeployPushOutlineIcon` | `import { DeployPushOutlineIcon } from '@vapor-ui/icons'` |
| `DetailViewOutlineIcon` | `import { DetailViewOutlineIcon } from '@vapor-ui/icons'` |
| `DiscOutlineIcon` | `import { DiscOutlineIcon } from '@vapor-ui/icons'` |
| `DiscardOutlineIcon` | `import { DiscardOutlineIcon } from '@vapor-ui/icons'` |
| `DiscussionOutlineIcon` | `import { DiscussionOutlineIcon } from '@vapor-ui/icons'` |
| `DislikeOutlineIcon` | `import { DislikeOutlineIcon } from '@vapor-ui/icons'` |
| `DislikeThumbOutlineIcon` | `import { DislikeThumbOutlineIcon } from '@vapor-ui/icons'` |
| `DividerOutlineIcon` | `import { DividerOutlineIcon } from '@vapor-ui/icons'` |
| `DocumentViewerOutlineIcon` | `import { DocumentViewerOutlineIcon } from '@vapor-ui/icons'` |
| `DollarOutlineIcon` | `import { DollarOutlineIcon } from '@vapor-ui/icons'` |
| `DownloadOutlineIcon` | `import { DownloadOutlineIcon } from '@vapor-ui/icons'` |
| `EditOutlineIcon` | `import { EditOutlineIcon } from '@vapor-ui/icons'` |
| `EnterOutlineIcon` | `import { EnterOutlineIcon } from '@vapor-ui/icons'` |
| `EqualOutlineIcon` | `import { EqualOutlineIcon } from '@vapor-ui/icons'` |
| `EraserOutlineIcon` | `import { EraserOutlineIcon } from '@vapor-ui/icons'` |
| `ErrorCircleOutlineIcon` | `import { ErrorCircleOutlineIcon } from '@vapor-ui/icons'` |
| `ExamListOutlineIcon` | `import { ExamListOutlineIcon } from '@vapor-ui/icons'` |
| `ExamOutlineIcon` | `import { ExamOutlineIcon } from '@vapor-ui/icons'` |
| `ExamReportOutlineIcon` | `import { ExamReportOutlineIcon } from '@vapor-ui/icons'` |
| `ExpandOutlineIcon` | `import { ExpandOutlineIcon } from '@vapor-ui/icons'` |
| `ExploreOutlineIcon` | `import { ExploreOutlineIcon } from '@vapor-ui/icons'` |
| `ExportOutlineIcon` | `import { ExportOutlineIcon } from '@vapor-ui/icons'` |
| `FileAddOutlineIcon` | `import { FileAddOutlineIcon } from '@vapor-ui/icons'` |
| `FileDeleteOutlineIcon` | `import { FileDeleteOutlineIcon } from '@vapor-ui/icons'` |
| `FileEditOutlineIcon` | `import { FileEditOutlineIcon } from '@vapor-ui/icons'` |
| `FileNewOutlineIcon` | `import { FileNewOutlineIcon } from '@vapor-ui/icons'` |
| `FileOutlineIcon` | `import { FileOutlineIcon } from '@vapor-ui/icons'` |
| `FilterOutlineIcon` | `import { FilterOutlineIcon } from '@vapor-ui/icons'` |
| `FlagOutlineIcon` | `import { FlagOutlineIcon } from '@vapor-ui/icons'` |
| `FoldOutlineIcon` | `import { FoldOutlineIcon } from '@vapor-ui/icons'` |
| `FolderNewOutlineIcon` | `import { FolderNewOutlineIcon } from '@vapor-ui/icons'` |
| `FolderOutlineIcon` | `import { FolderOutlineIcon } from '@vapor-ui/icons'` |
| `FolderSearchOutlineIcon` | `import { FolderSearchOutlineIcon } from '@vapor-ui/icons'` |
| `ForkOutlineIcon` | `import { ForkOutlineIcon } from '@vapor-ui/icons'` |
| `FormatColorTextOutlineIcon` | `import { FormatColorTextOutlineIcon } from '@vapor-ui/icons'` |
| `ForwardPageOutlineIcon` | `import { ForwardPageOutlineIcon } from '@vapor-ui/icons'` |
| `FunctionOutlineIcon` | `import { FunctionOutlineIcon } from '@vapor-ui/icons'` |
| `FunctionsOutlineIcon` | `import { FunctionsOutlineIcon } from '@vapor-ui/icons'` |
| `GameOutlineIcon` | `import { GameOutlineIcon } from '@vapor-ui/icons'` |
| `GiftOutlineIcon` | `import { GiftOutlineIcon } from '@vapor-ui/icons'` |
| `GitMergeOutlineIcon` | `import { GitMergeOutlineIcon } from '@vapor-ui/icons'` |
| `GlobalOutlineIcon` | `import { GlobalOutlineIcon } from '@vapor-ui/icons'` |
| `GoogleDrawingOutlineIcon` | `import { GoogleDrawingOutlineIcon } from '@vapor-ui/icons'` |
| `GooglePresentationOutlineIcon` | `import { GooglePresentationOutlineIcon } from '@vapor-ui/icons'` |
| `GoogleSpreadsheetOutlineIcon` | `import { GoogleSpreadsheetOutlineIcon } from '@vapor-ui/icons'` |
| `GroupOutlineIcon` | `import { GroupOutlineIcon } from '@vapor-ui/icons'` |
| `HardBreakOutlineIcon` | `import { HardBreakOutlineIcon } from '@vapor-ui/icons'` |
| `HeadingOutlineIcon` | `import { HeadingOutlineIcon } from '@vapor-ui/icons'` |
| `HeartOutlineIcon` | `import { HeartOutlineIcon } from '@vapor-ui/icons'` |
| `HelpCircleOutlineIcon` | `import { HelpCircleOutlineIcon } from '@vapor-ui/icons'` |
| `HighlightViewOutlineIcon` | `import { HighlightViewOutlineIcon } from '@vapor-ui/icons'` |
| `HistoryOutlineIcon` | `import { HistoryOutlineIcon } from '@vapor-ui/icons'` |
| `HomeOutlineIcon` | `import { HomeOutlineIcon } from '@vapor-ui/icons'` |
| `IdCardOutlineIcon` | `import { IdCardOutlineIcon } from '@vapor-ui/icons'` |
| `ImageOutlineIcon` | `import { ImageOutlineIcon } from '@vapor-ui/icons'` |
| `ImagePackOutlineIcon` | `import { ImagePackOutlineIcon } from '@vapor-ui/icons'` |
| `ImageToContainerOutlineIcon` | `import { ImageToContainerOutlineIcon } from '@vapor-ui/icons'` |
| `ImportOutlineIcon` | `import { ImportOutlineIcon } from '@vapor-ui/icons'` |
| `InOutlineIcon` | `import { InOutlineIcon } from '@vapor-ui/icons'` |
| `IndentDecreaseOutlineIcon` | `import { IndentDecreaseOutlineIcon } from '@vapor-ui/icons'` |
| `IndentIncreaseOutlineIcon` | `import { IndentIncreaseOutlineIcon } from '@vapor-ui/icons'` |
| `InfiniteOutlineIcon` | `import { InfiniteOutlineIcon } from '@vapor-ui/icons'` |
| `InfoCircleOutlineIcon` | `import { InfoCircleOutlineIcon } from '@vapor-ui/icons'` |
| `InputSettingOutlineIcon` | `import { InputSettingOutlineIcon } from '@vapor-ui/icons'` |
| `IntelliSenseEnumOutlineIcon` | `import { IntelliSenseEnumOutlineIcon } from '@vapor-ui/icons'` |
| `IntelliSenseEventOutlineIcon` | `import { IntelliSenseEventOutlineIcon } from '@vapor-ui/icons'` |
| `IntelliSenseFieldOutlineIcon` | `import { IntelliSenseFieldOutlineIcon } from '@vapor-ui/icons'` |
| `IntelliSenseModuleOutlineIcon` | `import { IntelliSenseModuleOutlineIcon } from '@vapor-ui/icons'` |
| `IntelliSensePropertyOutlineIcon` | `import { IntelliSensePropertyOutlineIcon } from '@vapor-ui/icons'` |
| `IntelliSenseReferenceOutlineIcon` | `import { IntelliSenseReferenceOutlineIcon } from '@vapor-ui/icons'` |
| `IntelliSenseSnippetOutlineIcon` | `import { IntelliSenseSnippetOutlineIcon } from '@vapor-ui/icons'` |
| `IntelliSenseTypeParameterOutlineIcon` | `import { IntelliSenseTypeParameterOutlineIcon } from '@vapor-ui/icons'` |
| `IntelliSenseUnitOutlineIcon` | `import { IntelliSenseUnitOutlineIcon } from '@vapor-ui/icons'` |
| `IntelliSenseVariableOutlineIcon` | `import { IntelliSenseVariableOutlineIcon } from '@vapor-ui/icons'` |
| `KeyboardOutlineIcon` | `import { KeyboardOutlineIcon } from '@vapor-ui/icons'` |
| `KidOutlineIcon` | `import { KidOutlineIcon } from '@vapor-ui/icons'` |
| `LightOutlineIcon` | `import { LightOutlineIcon } from '@vapor-ui/icons'` |
| `LightbulbOutlineIcon` | `import { LightbulbOutlineIcon } from '@vapor-ui/icons'` |
| `LightningOutlineIcon` | `import { LightningOutlineIcon } from '@vapor-ui/icons'` |
| `LikeOutlineIcon` | `import { LikeOutlineIcon } from '@vapor-ui/icons'` |
| `LikeThumbOutlineIcon` | `import { LikeThumbOutlineIcon } from '@vapor-ui/icons'` |
| `LineSpacingOutlineIcon` | `import { LineSpacingOutlineIcon } from '@vapor-ui/icons'` |
| `LineStyleOutlineIcon` | `import { LineStyleOutlineIcon } from '@vapor-ui/icons'` |
| `LinkOffOutlineIcon` | `import { LinkOffOutlineIcon } from '@vapor-ui/icons'` |
| `LinkOutlineIcon` | `import { LinkOutlineIcon } from '@vapor-ui/icons'` |
| `LiveLessonOutlineIcon` | `import { LiveLessonOutlineIcon } from '@vapor-ui/icons'` |
| `LocationOutlineIcon` | `import { LocationOutlineIcon } from '@vapor-ui/icons'` |
| `LockOutlineIcon` | `import { LockOutlineIcon } from '@vapor-ui/icons'` |
| `LongTextOutlineIcon` | `import { LongTextOutlineIcon } from '@vapor-ui/icons'` |
| `MagicWandOutlineIcon` | `import { MagicWandOutlineIcon } from '@vapor-ui/icons'` |
| `MailOutlineIcon` | `import { MailOutlineIcon } from '@vapor-ui/icons'` |
| `ManagementOutlineIcon` | `import { ManagementOutlineIcon } from '@vapor-ui/icons'` |
| `MarkModeOutlineIcon` | `import { MarkModeOutlineIcon } from '@vapor-ui/icons'` |
| `MarkdownOutlineIcon` | `import { MarkdownOutlineIcon } from '@vapor-ui/icons'` |
| `MemoOutlineIcon` | `import { MemoOutlineIcon } from '@vapor-ui/icons'` |
| `MenuOutlineIcon` | `import { MenuOutlineIcon } from '@vapor-ui/icons'` |
| `MergeUpOutlineIcon` | `import { MergeUpOutlineIcon } from '@vapor-ui/icons'` |
| `MessageOutlineIcon` | `import { MessageOutlineIcon } from '@vapor-ui/icons'` |
| `MethodOutlineIcon` | `import { MethodOutlineIcon } from '@vapor-ui/icons'` |
| `MicOffOutlineIcon` | `import { MicOffOutlineIcon } from '@vapor-ui/icons'` |
| `MicOnOutlineIcon` | `import { MicOnOutlineIcon } from '@vapor-ui/icons'` |
| `MinusBoxOutlineIcon` | `import { MinusBoxOutlineIcon } from '@vapor-ui/icons'` |
| `MinusOutlineIcon` | `import { MinusOutlineIcon } from '@vapor-ui/icons'` |
| `MoreCommonOutlineIcon` | `import { MoreCommonOutlineIcon } from '@vapor-ui/icons'` |
| `MovieOutlineIcon` | `import { MovieOutlineIcon } from '@vapor-ui/icons'` |
| `NetfficeOutlineIcon` | `import { NetfficeOutlineIcon } from '@vapor-ui/icons'` |
| `NetworkOutlineIcon` | `import { NetworkOutlineIcon } from '@vapor-ui/icons'` |
| `NextOutlineIcon` | `import { NextOutlineIcon } from '@vapor-ui/icons'` |
| `NoImageOutlineIcon` | `import { NoImageOutlineIcon } from '@vapor-ui/icons'` |
| `NoUserOutlineIcon` | `import { NoUserOutlineIcon } from '@vapor-ui/icons'` |
| `NoticeBoardOutlineIcon` | `import { NoticeBoardOutlineIcon } from '@vapor-ui/icons'` |
| `NoticeCircleOutlineIcon` | `import { NoticeCircleOutlineIcon } from '@vapor-ui/icons'` |
| `NumberlistOutlineIcon` | `import { NumberlistOutlineIcon } from '@vapor-ui/icons'` |
| `OpenFileOutlineIcon` | `import { OpenFileOutlineIcon } from '@vapor-ui/icons'` |
| `OpenFolderOutlineIcon` | `import { OpenFolderOutlineIcon } from '@vapor-ui/icons'` |
| `OpenInNewOutlineIcon` | `import { OpenInNewOutlineIcon } from '@vapor-ui/icons'` |
| `OutOutlineIcon` | `import { OutOutlineIcon } from '@vapor-ui/icons'` |
| `PandasOutlineIcon` | `import { PandasOutlineIcon } from '@vapor-ui/icons'` |
| `PanelOpenOutlineIcon` | `import { PanelOpenOutlineIcon } from '@vapor-ui/icons'` |
| `PauseOutlineIcon` | `import { PauseOutlineIcon } from '@vapor-ui/icons'` |
| `PcOutlineIcon` | `import { PcOutlineIcon } from '@vapor-ui/icons'` |
| `PdfOutlineIcon` | `import { PdfOutlineIcon } from '@vapor-ui/icons'` |
| `PhoneOutlineIcon` | `import { PhoneOutlineIcon } from '@vapor-ui/icons'` |
| `PinSetOutlineIcon` | `import { PinSetOutlineIcon } from '@vapor-ui/icons'` |
| `PlansOutlineIcon` | `import { PlansOutlineIcon } from '@vapor-ui/icons'` |
| `PlayOutlineIcon` | `import { PlayOutlineIcon } from '@vapor-ui/icons'` |
| `PlaylistOutlineIcon` | `import { PlaylistOutlineIcon } from '@vapor-ui/icons'` |
| `PlusBoxOutlineIcon` | `import { PlusBoxOutlineIcon } from '@vapor-ui/icons'` |
| `PlusOutlineIcon` | `import { PlusOutlineIcon } from '@vapor-ui/icons'` |
| `PortforwardingOutlineIcon` | `import { PortforwardingOutlineIcon } from '@vapor-ui/icons'` |
| `PreOutlineIcon` | `import { PreOutlineIcon } from '@vapor-ui/icons'` |
| `PresentScreenOutlineIcon` | `import { PresentScreenOutlineIcon } from '@vapor-ui/icons'` |
| `PresetOutlineIcon` | `import { PresetOutlineIcon } from '@vapor-ui/icons'` |
| `PreviewOutlineIcon` | `import { PreviewOutlineIcon } from '@vapor-ui/icons'` |
| `PriceOutlineIcon` | `import { PriceOutlineIcon } from '@vapor-ui/icons'` |
| `PrintOutlineIcon` | `import { PrintOutlineIcon } from '@vapor-ui/icons'` |
| `ProgrammingOutlineIcon` | `import { ProgrammingOutlineIcon } from '@vapor-ui/icons'` |
| `ProjectOutlineIcon` | `import { ProjectOutlineIcon } from '@vapor-ui/icons'` |
| `ProjectSettingOutlineIcon` | `import { ProjectSettingOutlineIcon } from '@vapor-ui/icons'` |
| `PsychologyOutlineIcon` | `import { PsychologyOutlineIcon } from '@vapor-ui/icons'` |
| `PublishOutlineIcon` | `import { PublishOutlineIcon } from '@vapor-ui/icons'` |
| `PullOutlineIcon` | `import { PullOutlineIcon } from '@vapor-ui/icons'` |
| `QnAOutlineIcon` | `import { QnAOutlineIcon } from '@vapor-ui/icons'` |
| `QrcodeOutlineIcon` | `import { QrcodeOutlineIcon } from '@vapor-ui/icons'` |
| `QuoteOutlineIcon` | `import { QuoteOutlineIcon } from '@vapor-ui/icons'` |
| `ReferenceOutlineIcon` | `import { ReferenceOutlineIcon } from '@vapor-ui/icons'` |
| `RefreshOutlineIcon` | `import { RefreshOutlineIcon } from '@vapor-ui/icons'` |
| `RegexOutlineIcon` | `import { RegexOutlineIcon } from '@vapor-ui/icons'` |
| `ReloadOutlineIcon` | `import { ReloadOutlineIcon } from '@vapor-ui/icons'` |
| `RemoteOffOutlineIcon` | `import { RemoteOffOutlineIcon } from '@vapor-ui/icons'` |
| `RemoteOutlineIcon` | `import { RemoteOutlineIcon } from '@vapor-ui/icons'` |
| `ReplyOutlineIcon` | `import { ReplyOutlineIcon } from '@vapor-ui/icons'` |
| `RestaurantOutlineIcon` | `import { RestaurantOutlineIcon } from '@vapor-ui/icons'` |
| `ResultManagementOutlineIcon` | `import { ResultManagementOutlineIcon } from '@vapor-ui/icons'` |
| `RouteOutlineIcon` | `import { RouteOutlineIcon } from '@vapor-ui/icons'` |
| `RunOutlineIcon` | `import { RunOutlineIcon } from '@vapor-ui/icons'` |
| `SaveAsOutlineIcon` | `import { SaveAsOutlineIcon } from '@vapor-ui/icons'` |
| `SaveOutlineIcon` | `import { SaveOutlineIcon } from '@vapor-ui/icons'` |
| `SavingOutlineIcon` | `import { SavingOutlineIcon } from '@vapor-ui/icons'` |
| `SchoolOutlineIcon` | `import { SchoolOutlineIcon } from '@vapor-ui/icons'` |
| `SearchOutlineIcon` | `import { SearchOutlineIcon } from '@vapor-ui/icons'` |
| `SendOutlineIcon` | `import { SendOutlineIcon } from '@vapor-ui/icons'` |
| `SettingOutlineIcon` | `import { SettingOutlineIcon } from '@vapor-ui/icons'` |
| `ShareOutlineIcon` | `import { ShareOutlineIcon } from '@vapor-ui/icons'` |
| `ShoppingCartOutlineIcon` | `import { ShoppingCartOutlineIcon } from '@vapor-ui/icons'` |
| `ShortTextOutlineIcon` | `import { ShortTextOutlineIcon } from '@vapor-ui/icons'` |
| `ShortcutOutlineIcon` | `import { ShortcutOutlineIcon } from '@vapor-ui/icons'` |
| `SignalPowerOutlineIcon` | `import { SignalPowerOutlineIcon } from '@vapor-ui/icons'` |
| `SlashOutlineIcon` | `import { SlashOutlineIcon } from '@vapor-ui/icons'` |
| `SoundOffOutlineIcon` | `import { SoundOffOutlineIcon } from '@vapor-ui/icons'` |
| `SoundOnOutlineIcon` | `import { SoundOnOutlineIcon } from '@vapor-ui/icons'` |
| `SpinnerOutlineIcon` | `import { SpinnerOutlineIcon } from '@vapor-ui/icons'` |
| `SplitHorizontalOutlineIcon` | `import { SplitHorizontalOutlineIcon } from '@vapor-ui/icons'` |
| `SplitVerticalOutlineIcon` | `import { SplitVerticalOutlineIcon } from '@vapor-ui/icons'` |
| `StarOutlineIcon` | `import { StarOutlineIcon } from '@vapor-ui/icons'` |
| `StepInOutlineIcon` | `import { StepInOutlineIcon } from '@vapor-ui/icons'` |
| `StepOutOutlineIcon` | `import { StepOutOutlineIcon } from '@vapor-ui/icons'` |
| `StepOverOutlineIcon` | `import { StepOverOutlineIcon } from '@vapor-ui/icons'` |
| `StopOutlineIcon` | `import { StopOutlineIcon } from '@vapor-ui/icons'` |
| `StruckOutlineIcon` | `import { StruckOutlineIcon } from '@vapor-ui/icons'` |
| `StudentManagementOutlineIcon` | `import { StudentManagementOutlineIcon } from '@vapor-ui/icons'` |
| `SyllabusOutlineIcon` | `import { SyllabusOutlineIcon } from '@vapor-ui/icons'` |
| `TableFilterOutlineIcon` | `import { TableFilterOutlineIcon } from '@vapor-ui/icons'` |
| `TableOutlineIcon` | `import { TableOutlineIcon } from '@vapor-ui/icons'` |
| `TabletOutlineIcon` | `import { TabletOutlineIcon } from '@vapor-ui/icons'` |
| `TerminalConnectOutlineIcon` | `import { TerminalConnectOutlineIcon } from '@vapor-ui/icons'` |
| `TerminalOutlineIcon` | `import { TerminalOutlineIcon } from '@vapor-ui/icons'` |
| `TerminalWindowOutlineIcon` | `import { TerminalWindowOutlineIcon } from '@vapor-ui/icons'` |
| `TestOutlineIcon` | `import { TestOutlineIcon } from '@vapor-ui/icons'` |
| `TextColorOutlineIcon` | `import { TextColorOutlineIcon } from '@vapor-ui/icons'` |
| `TextOutlineIcon` | `import { TextOutlineIcon } from '@vapor-ui/icons'` |
| `TextScanOutlineIcon` | `import { TextScanOutlineIcon } from '@vapor-ui/icons'` |
| `TimeOutlineIcon` | `import { TimeOutlineIcon } from '@vapor-ui/icons'` |
| `TransferOutlineIcon` | `import { TransferOutlineIcon } from '@vapor-ui/icons'` |
| `TranslateOutlineIcon` | `import { TranslateOutlineIcon } from '@vapor-ui/icons'` |
| `TrashOutlineIcon` | `import { TrashOutlineIcon } from '@vapor-ui/icons'` |
| `UnderlineOutlineIcon` | `import { UnderlineOutlineIcon } from '@vapor-ui/icons'` |
| `UndoOutlineIcon` | `import { UndoOutlineIcon } from '@vapor-ui/icons'` |
| `UnlockOutlineIcon` | `import { UnlockOutlineIcon } from '@vapor-ui/icons'` |
| `UploadOutlineIcon` | `import { UploadOutlineIcon } from '@vapor-ui/icons'` |
| `UserCheckOutlineIcon` | `import { UserCheckOutlineIcon } from '@vapor-ui/icons'` |
| `UserMoveOutlineIcon` | `import { UserMoveOutlineIcon } from '@vapor-ui/icons'` |
| `UserOutlineIcon` | `import { UserOutlineIcon } from '@vapor-ui/icons'` |
| `UserSearchOutlineIcon` | `import { UserSearchOutlineIcon } from '@vapor-ui/icons'` |
| `VideocamOffOutlineIcon` | `import { VideocamOffOutlineIcon } from '@vapor-ui/icons'` |
| `VideocamOnOutlineIcon` | `import { VideocamOnOutlineIcon } from '@vapor-ui/icons'` |
| `ViewExpandOutlineIcon` | `import { ViewExpandOutlineIcon } from '@vapor-ui/icons'` |
| `ViewModuleOutlineIcon` | `import { ViewModuleOutlineIcon } from '@vapor-ui/icons'` |
| `ViewOffOutlineIcon` | `import { ViewOffOutlineIcon } from '@vapor-ui/icons'` |
| `ViewOnOutlineIcon` | `import { ViewOnOutlineIcon } from '@vapor-ui/icons'` |
| `ViewShrinkOutlineIcon` | `import { ViewShrinkOutlineIcon } from '@vapor-ui/icons'` |
| `WarningOutlineIcon` | `import { WarningOutlineIcon } from '@vapor-ui/icons'` |
| `WordSearchOutlineIcon` | `import { WordSearchOutlineIcon } from '@vapor-ui/icons'` |
| `ZoomInOutlineIcon` | `import { ZoomInOutlineIcon } from '@vapor-ui/icons'` |
| `ZoomOutOutlineIcon` | `import { ZoomOutOutlineIcon } from '@vapor-ui/icons'` |
# Welcome, Vapor UI
URL: /docs
Vapor는 구름의 세 번째 디자인 시스템으로, 다양한 서브 패키지들로 구성되어 있습니다. 각 서브 패키지는 다음과 같은 역할을 수행합니다.
# Avatar
URL: /docs/components/avatar
Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다.
## Import
```js
import { Avatar } from '@vapor-ui/core';
```
## Preview
```tsx
import { Avatar } from '@vapor-ui/core';
export default function DefaultAvatar() {
return (
goorm
);
}
```
## Props
### Avatar.Root
| prop | type | default | description |
| --------- | ---------------------- | -------- | ---------------------------------------------------------- |
| `src` | `string \| undefined` | | 아바타 이미지의 URL입니다. 지정하지 않으면 폴백이 표시됩니다. |
| `alt` | `string` | | 아바타 이미지를 설명하는 대체 텍스트입니다. 폴백 이니셜과 배경색을 생성하는 데에도 사용됩니다. |
| `delayMs` | `number \| undefined` | `0` | 이미지가 로딩 중이거나 실패한 경우, 폴백을 표시하기까지의 지연 시간을 밀리초(ms) 단위로 지정합니다. |
| `size` | `sm \| md \| lg \| xl` | `md` | 아바타의 전체 크기를 제어합니다. |
| `shape` | `square \| circle` | `square` | 아바타의 모서리 둥글기를 설정합니다. square는 둥근 사각형, circle은 완전한 원형입니다. |
### Avatar.Image
| prop | type | default | description |
| ----------- | --------------------- | ------- | ------------------------------ |
| `className` | `string \| undefined` | | 이미지 요소에 적용할 추가 CSS 클래스를 지정합니다. |
### Avatar.Fallback
| prop | type | default | description |
| ----------- | ---------------------------------- | ------- | ----------------------------- |
| `className` | `string \| undefined` | | 폴백 요소에 적용할 추가 CSS 클래스를 지정합니다. |
| `style` | `React.CSSProperties \| undefined` | | 폴백 요소에 대한 인라인 스타일을 지정합니다. |
### Avatar.Simple
| prop | type | default | description |
| --------- | ---------------------- | -------- | ---------------------------------------------------------- |
| `src` | `string \| undefined` | | 아바타 이미지의 URL입니다. 지정하지 않으면 폴백이 표시됩니다. |
| `alt` | `string` | | 아바타 이미지를 설명하는 대체 텍스트입니다. 폴백 이니셜과 배경색을 생성하는 데에도 사용됩니다. |
| `delayMs` | `number \| undefined` | `0` | 이미지가 로딩 중이거나 실패한 경우, 폴백을 표시하기까지의 지연 시간을 밀리초(ms) 단위로 지정합니다. |
| `size` | `sm \| md \| lg \| xl` | `md` | 아바타의 전체 크기를 제어합니다. |
| `shape` | `square \| circle` | `square` | 아바타의 모서리 둥글기를 설정합니다. square는 둥근 사각형, circle은 완전한 원형입니다. |
## Accessibility Table
Avatar WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다. Vapor Avatar는 Radix 기능을 기반으로 구축되어 일부 웹 접근성은 Radix에서 제공하고 있습니다.
### 개발 시 준수해야 할 내용을 명시합니다.
| Props | Description |
| ------- | ---------------------------------------------------------------------------- |
| **alt** | 아바타 이미지의 대체 텍스트를 지정합니다. 이미지를 불러오는 데에 실패한 경우, label의 첫 글자를 대체 UI로 사용합니다. |
**alt Example:**
```tsx
```
# Badge
URL: /docs/components/badge
Badge는 이미지, 컨텐츠 등의 상태 또는 분류를 시각적으로 표시합니다.
## Import
```js
import { Badge } from '@vapor-ui/core';
```
## Preview
```tsx
import { Badge } from '@vapor-ui/core';
export default function DefaultBadge() {
return Hello;
}
```
## Props
### Badge
| prop | type | default | description |
| ------- | ------------------------------------------------------------- | --------- | ------------------------------------------------------------- |
| `color` | `primary \| hint \| danger \| success \| warning \| contrast` | `primary` | 배지의 색상(의미)을 설정합니다. 예컨대 success는 성공 상태를, danger는 오류 상태를 나타냅니다. |
| `size` | `sm \| md \| lg` | `md` | 배지의 크기를 설정합니다. sm은 작은 크기, lg는 큰 크기를 의미합니다. |
| `shape` | `square \| pill` | `square` | 배지의 모양을 설정합니다. square는 둥근 사각형, pill은 완전히 둥근 알약 형태입니다. |
## Accessibility Table
Badge WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다.
### 컴포넌트 내부적으로 준수되고 있는 접근성 기능을 명시합니다.
| Accessibility | Description |
| ------------- | ----------------------------------------------- |
| **WCAG** | WCAG 2.x criterion 1.4.3 (level AA)를 준수하고 있습니다. |
# Button
URL: /docs/components/button
Button은 사용자가 주요 작업을 수행하도록 돕는 핵심 상호작용 요소입니다.
## Import
```js
import { Button } from '@vapor-ui/core';
```
## Preview
```tsx
import { Button } from '@vapor-ui/core';
export default function DefaultButton() {
return ;
}
```
## Props
### Button
| prop | type | default | description |
| --------- | ------------------------------------------------------------------ | --------- | -------------------------------- |
| `color` | `primary \| secondary \| success \| warning \| danger \| contrast` | `primary` | 버튼의 주 색상(의미)을 설정합니다. |
| `size` | `sm \| md \| lg \| xl` | `md` | 버튼의 크기를 설정합니다. |
| `variant` | `fill \| outline \| ghost` | `fill` | 버튼의 스타일 변형을 선택합니다. |
| `stretch` | `boolean` | `false` | true일 경우 버튼이 컨테이너의 전체 너비를 차지합니다. |
## Accessibility Table
Button WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다.
### 개발 시 준수해야 할 내용을 명시합니다.
| Props | Description |
| ---------------- | ----------------------------------------------------------------- |
| **children** | Button 내부에는 Phrasing Content만 사용할 수 있습니다. |
| **aria-pressed** | 토글 버튼으로 이용되면, aria-pressed 속성에 true, false, 또는 mixed 값을 설정해야 합니다. |
**aria-pressed Example:**
```tsx
import { Button } from "@vapor-ui/core";
import { useState } from "react";
const MuteButton = () => {
const [isMuted, setIsMuted] = useState(false);
const handleClick = () => {
setIsMuted((prev) => !prev);
};
return (
);
};
```
### Keyboard Interactions
| Interaction | Description |
| ----------- | ------------------------------------- |
| **Space** | 버튼에 포커스가 있을 때 space 키를 누르면 버튼이 클릭됩니다. |
| **Enter** | 버튼에 포커스가 있을 때 enter 키를 누르면 버튼이 클릭됩니다. |
# Callout
URL: /docs/components/callout
Callout은 중요한 정보를 시각적으로 강조하여 사용자에게 전달하는 메시지 컴포넌트입니다.
## Import
```js
import { Callout } from '@vapor-ui/core';
```
## Preview
```tsx
import { Callout } from '@vapor-ui/core';
export default function DefaultCallout() {
return Anyone can develop;
}
```
## Props
### Callout
| prop | type | default | description |
| ------- | ------------------------------------------------------------- | --------- | ------------------- |
| `color` | `primary \| success \| warning \| danger \| hint \| contrast` | `primary` | Callout의 색상을 설정합니다. |
# Card
URL: /docs/components/card
Card는 이미지와 텍스트, 일부 기능 버튼을 포함한 컨테이너로 콘텐츠를 제공합니다.
## Import
```js
import { Card } from '@vapor-ui/core';
```
## Preview
```tsx
import { Card } from '@vapor-ui/core';
export default function DefaultCard() {
return (
Basic Template
This is a Basic Template
Footer
);
}
```
## Props
### Card.Root
| prop | type | default | description |
| ----------- | --------------------- | ------- | -------------------------------- |
| `className` | `string \| undefined` | | 카드 루트 요소에 적용할 추가 CSS 클래스를 지정합니다. |
| `children` | `React.ReactNode` | | 카드에 표시할 콘텐츠입니다. |
### Card.Header
| prop | type | default | description |
| ----------- | --------------------- | ------- | ----------------------------- |
| `className` | `string \| undefined` | | 헤더 요소에 적용할 추가 CSS 클래스를 지정합니다. |
| `children` | `React.ReactNode` | | 헤더에 표시할 콘텐츠입니다. |
### Card.Body
| prop | type | default | description |
| ----------- | --------------------- | ------- | ----------------------------- |
| `className` | `string \| undefined` | | 바디 요소에 적용할 추가 CSS 클래스를 지정합니다. |
| `children` | `React.ReactNode` | | 바디에 표시할 콘텐츠입니다. |
### Card.Footer
| prop | type | default | description |
| ----------- | --------------------- | ------- | ----------------------------- |
| `className` | `string \| undefined` | | 푸터 요소에 적용할 추가 CSS 클래스를 지정합니다. |
| `children` | `React.ReactNode` | | 푸터에 표시할 콘텐츠입니다. |
# Checkbox
URL: /docs/components/checkbox
Checkbox는 여러 항목 중 복수 선택을 가능하게 하는 입력 컴포넌트입니다.
## Import
```js
import { Checkbox } from '@vapor-ui/core';
```
## Preview
```tsx
import { Checkbox } from '@vapor-ui/core';
export default function DefaultCheckbox() {
return (
동의
);
}
```
## Props
### Checkbox.Root
| prop | type | default | description |
| ----------------- | ---------------------------- | ------- | ---------------------------------------------------- |
| `checked` | `boolean \| undefined` | | 제어형 체크 상태입니다. true이면 체크박스가 선택된 상태를 강제로 유지합니다. |
| `defaultChecked` | `boolean \| undefined` | `false` | 언컨트롤드 초기 체크 상태를 지정합니다. |
| `onCheckedChange` | `(checked: boolean) => void` | | 체크 상태가 변경될 때 호출되는 콜백 함수입니다. |
| `indeterminate` | `boolean \| undefined` | `false` | 혼합(indeterminate) 상태를 표시합니다. 일부 선택된 경우를 나타낼 때 사용합니다. |
| `size` | `md \| lg` | `md` | 체크박스의 크기를 설정합니다. |
| `disabled` | `boolean \| undefined` | `false` | 체크박스를 비활성화합니다. |
| `invalid` | `boolean \| undefined` | `false` | 폼 유효성 검증 실패 등의 상태를 나타냅니다. |
| `visuallyHidden` | `boolean \| undefined` | `false` | 레이블을 시각적으로 숨기지만 스크린리더에는 읽히도록 합니다. |
### Checkbox.Control
| prop | type | default | description |
| ------------ | --------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `forceMount` | `true \| undefined` | | 언마운트되지 않고 표시 상태만 토글되도록 강제합니다. |
| `id` | `string \| undefined` | | 체크박스 컨트롤의 id를 지정합니다. 값을 지정하지 않으면 React의 useId() 훅을 통해 Checkbox.Root 단계에서 고유 id가 1회 생성되며, 해당 id는 동일 컨텍스트에 포함된 Checkbox.Control·Checkbox.Label 간에 자동으로 공유되어 접근성이 보장됩니다. |
### Checkbox.Label
| prop | type | default | description |
| ---------- | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `htmlFor` | `string \| undefined` | | 레이블이 연결될 Checkbox.Control 요소의 id를 지정합니다. 이 값을 생략하면 같은 Checkbox.Root 안에서 발견된 Checkbox.Control 의 id가 자동으로 대입되어 시멘틱 연관성이 유지되고 키보드·스크린리더 접근성이 확보됩니다. |
| `children` | `React.ReactNode` | | 레이블에 표시할 텍스트나 노드입니다. |
## Accessibility Table
Checkbox WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다. Vapor Checkbox는 Radix 기능을 기반으로 구축되어 일부 웹 접근성은 Radix에서 제공하고 있습니다.
### 개발 시 준수해야 할 내용을 명시합니다.
| Props | Description |
| ----------------- | ------------------------------------------------------------------------------------------------ |
| **label** | 각 체크박스는 시각적으로도 명확한 레이블(Label)과 연관되어야 합니다. Label 컴포넌트를 사용하거나 `htmlFor` 속성을 통해 컨트롤과 연결해야 합니다. |
| **indeterminate** | indeterminate 상태는 혼합(mixed) 상태를 의미하며, 보조 기술에 올바르게 전달됩니다. 부분 선택을 나타낼 때 이 상태를 사용하세요. |
**label Example:**
```tsx
이용약관에 동의
```
**indeterminate Example:**
```tsx
부분 선택
```
### Keyboard Interactions
| Interaction | Description |
| ----------- | -------------------------------------- |
| **Space** | 체크박스에 포커스가 있을 때 space 키를 누르면 체크/해제됩니다. |
# Dialog
URL: /docs/components/dialog
Dialog는 페이지 위에 모달 형태로 정보를 표시하거나 작업을 수행하도록 하는 컴포넌트입니다.
## Import
```js
import { Dialog } from '@vapor-ui/core';
```
## Preview
```tsx
import { Dialog, Button } from '@vapor-ui/core';
export default function DefaultDialog() {
return (
알림여기에 다이얼로그 본문 내용이 들어갑니다.
);
}
```
## Props
### Dialog.Root
| prop | type | default | description |
| --------------------- | -------------------------------------- | ------- | ------------------------------------------------------------------------------------ |
| `closeOnClickOverlay` | `boolean \| undefined` | `true` | Overlay(배경)를 클릭했을 때 다이얼로그가 닫히도록 할지 여부를 결정합니다. false로 설정하면 배경 클릭 시에도 닫히지 않습니다. |
| `closeOnEscape` | `boolean \| undefined` | `true` | Escape 키 입력 시 다이얼로그를 닫을지 여부입니다. false로 설정하면 ESC 키를 눌러도 닫히지 않습니다. |
| `size` | `md \| lg \| xl \| undefined` | `md` | 다이얼로그 Content 의 가로 폭을 제어합니다. Root 에 설정하면 모든 Content 에 기본값으로 전달됩니다. |
| `open` | `boolean \| undefined` | | 제어 컴포넌트로서 다이얼로그의 열림 상태를 지정합니다. true 이면 항상 열려 있고, false 이면 닫힌 상태로 유지됩니다. |
| `defaultOpen` | `boolean \| undefined` | `false` | 언컨트롤드 모드에서 다이얼로그의 초기 열림 상태를 설정합니다. |
| `onOpenChange` | `(open: boolean) => void \| undefined` | | open 값이 변경될 때 호출되는 콜백 함수입니다. |
| `modal` | `boolean \| undefined` | `true` | true 일 때 모달(dialog) 모드로 포커스가 다이얼로그 바깥으로 이동하지 않습니다. false 로 설정하면 non-modal 상태로 동작합니다. |
### Dialog.Trigger
| prop | type | default | description |
| ---------- | ----------------- | ------- | ------------------------ |
| `children` | `React.ReactNode` | | 다이얼로그를 여는 트리거(버튼) 요소입니다. |
### Dialog.Content
| prop | type | default | description |
| ---------------------- | -------------------------------------- | ------- | ------------------------------- |
| `onPointerDownOutside` | `PointerDownOutsideEvent \| undefined` | | 다이얼로그 외부를 클릭했을 때 호출되는 콜백 함수입니다. |
| `onEscapeKeyDown` | `KeyboardEvent \| undefined` | | Escape 키를 눌렀을 때 호출되는 콜백 함수입니다. |
## Accessibility Table
Dialog 는 WAI-ARIA Authoring Practices 의 Modal Dialog 패턴을 준수합니다.
### 개발 시 준수해야 할 내용을 명시합니다.
| Props | Description |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **aria-labelledby / aria-describedby** | Dialog.Title 컴포넌트는 자동으로 role=dialog 요소에 aria-labelledby 를 연결합니다. Dialog.Description 사용 시 aria-describedby 로 연결되어 스크린리더가 내용을 읽을 수 있습니다. |
| **Focus Management** | 다이얼로그가 열리면 최초 포커스는 다이얼로그 컨텐츠로 이동하고, 닫히면 트리거로 되돌아갑니다. |
**aria-labelledby / aria-describedby Example:**
```tsx
Open제목세부 설명
```
**Focus Management Example:**
```tsx
// 기능은 Radix Dialog 에 의해 자동 처리됩니다.
```
### Keyboard Interactions
| Interaction | Description |
| ----------- | ------------------------------------------------------------------------ |
| **Escape** | 포커스가 다이얼로그 안에 있을 때 ESC 키를 누르면 다이얼로그가 닫힙니다. (closeOnEscape=false 인 경우 제외) |
| **Tab** | 다이얼로그 내부 요소 사이를 순환합니다. 다이얼로그 밖으로 포커스가 벗어나지 않습니다. |
# IconButton
URL: /docs/components/icon-button
IconButton은 특정 작업이나 기능을 나타내며, 텍스트 없이 아이콘만으로 명령을 전달하는 버튼입니다.
## Import
```js
import { IconButton } from '@vapor-ui/core';
```
## Preview
```tsx
import { IconButton } from '@vapor-ui/core';
import { HeartIcon } from '@vapor-ui/icons';
export default function DefaultIconButton() {
return (
);
}
```
## Props
### IconButton
| prop | type | default | description |
| ------------ | ------------------------------------------------------------------ | --------- | ------------------------------------------------------------ |
| `color` | `primary \| secondary \| success \| warning \| danger \| contrast` | `primary` | 아이콘 버튼의 주 색상(의미)을 설정합니다. |
| `size` | `sm \| md \| lg \| xl` | `md` | 버튼 및 아이콘의 크기를 설정합니다. |
| `variant` | `fill \| outline \| ghost` | `fill` | 버튼의 스타일 변형을 선택합니다. |
| `shape` | `square \| circle` | `square` | circle 경우 버튼이 완전히 원형이 됩니다. |
| `disabled` | `boolean` | `false` | 버튼을 비활성화합니다. |
| `aria-label` | `string` | | 화면 읽기 전용 사용자에게 아이콘 버튼의 용도를 설명하는 텍스트입니다. 가시적 레이블이 없으므로 필수입니다. |
## Accessibility Table
IconButton WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다.
### 개발 시 준수해야 할 내용을 명시합니다.
| Props | Description |
| -------------- | --------------------------------------------------------------------------------- |
| **aria-label** | 버튼의 기능을 설명하는 접근 가능한 이름을 제공해야 합니다. 아이콘 버튼의 경우, 아이콘의 모양이 아닌 기능을 간결하게 설명해야 합니다. |
**aria-label Example:**
```tsx
```
### 컴포넌트 내부적으로 준수되고 있는 접근성 기능을 명시합니다.
| Accessibility | Description |
| ------------------------- | ------------------------------------------------------------- |
| **aria-hidden** | 아이콘은 주로 장식적 요소이므로, aria-hidden="true"를 사용하여 스크린 리더가 이를 읽지 않도록 |
| 하여 불필요한 정보 전달을 방지하도록 합니다. | |
# Nav
URL: /docs/components/nav
Nav는 여러 콘텐츠 섹션 간 전환을 돕는 네비게이션 메뉴 컴포넌트입니다.
## Import
```js
import { Nav } from '@vapor-ui/core';
```
## Preview
```tsx
import { Nav } from '@vapor-ui/core';
export default function DefaultNav() {
return (
Default LinkSelected LinkDisabled Link
);
}
```
## Props
### Nav.Root
| prop | type | default | description |
| ----------- | ------------------------ | ------------ | ------------------------------------------------------ |
| `label` | `string` | | 스크린 리더 사용자에게 네비게이션의 목적을 설명하는 접근성 레이블입니다. |
| `direction` | `horizontal \| vertical` | `horizontal` | 네비게이션 메뉴가 가로 또는 세로 방향으로 배치될지 결정합니다. |
| `size` | `sm \| md \| lg \| xl` | `md` | Nav.Link 의 높이·타이포그래피 크기 등을 제어합니다. |
| `shape` | `fill \| ghost` | `fill` | Nav.Link 의 배경 스타일을 설정합니다. |
| `stretch` | `boolean` | `false` | stretch 가 true 면 Nav.List 와 Nav.Item 이 가용 공간을 가득 채웁니다. |
| `align` | `start \| center \| end` | `center` | Nav.Link 내부 컨텐츠(아이콘+텍스트 등)의 정렬 위치를 지정합니다. |
| `disabled` | `boolean` | `false` | Nav.Link 를 비활성화할지 여부입니다. |
### Nav.List
| prop | type | default | description |
| ----------- | --------------------- | ------- | ----------------------- |
| `className` | `string \| undefined` | | 리스트(ul)에 추가 클래스를 적용합니다. |
### Nav.Item
| prop | type | default | description |
| ----------- | --------------------- | ------- | --------------------------- |
| `className` | `string \| undefined` | | 리스트 아이템(li)에 추가 클래스를 적용합니다. |
### Nav.Link
| prop | type | default | description |
| ---------- | ---------------------- | ------- | ----------------------- |
| `selected` | `boolean \| undefined` | `false` | 현재 페이지와 일치하는 링크를 나타냅니다. |
| `disabled` | `boolean \| undefined` | `false` | 링크를 비활성화합니다. |
| `href` | `string \| undefined` | | 링크 대상 URL 입니다. |
### Nav.LinkItem
| prop | type | default | description |
| ----------- | --------------------- | ------- | ------------------------------------------------ |
| `className` | `string \| undefined` | | Nav.LinkItem 내부의 Nav.Link 요소에 전달할 추가 클래스를 지정합니다. |
## Accessibility Table
Nav WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다.
Vapor Nav는 Radix 기능을 기반으로 구축되어 일부 웹 접근성은 Radix에서 제공하고 있습니다.
### 개발 시 준수해야 할 내용을 명시합니다.
| Props | Description |
| -------------- | ----------------------------------------------------------------------------------------------------- |
| **aria-label** | 페이지에 여러 개의 네비게이션이 있는 경우, 네비게이션의 목적을 명확하게 설명해야 합니다. 이 때, aria-label에는 navigation이란 단어를 사용하지 않습니다. |
**aria-label Example:**
```tsx
```
### 컴포넌트 내부적으로 준수되고 있는 접근성 기능을 명시합니다.
| Accessibility | Description |
| ----------------------- | ------------------------------------------ |
| **role="navigation"** | 해당 요소가 네비게이션의 역할을 수행 중임을 안내합니다. |
| **aria-current="page"** | 내비게이션의 여러 링크 중에서 사용자가 현재 보고 있는 페이지를 나타냅니다. |
### Keyboard Interactions
| Interaction | Description |
| ----------- | ------------------------------------------ |
| **Space** | 링크에 포커스가 있을 때 Space 키를 누르면 링크가 활성화(클릭)됩니다. |
# Radio Group
URL: /docs/components/radio-group
Radio Group는 둘 또는 그 이상의 옵션 중 하나만 선택할 수 있도록 돕는 입력 컴포넌트입니다.
## Import
```jsx
import { RadioGroup } from '@vapor-ui/core';
```
## Preview
```tsx
import { RadioGroup } from '@vapor-ui/core';
export default function DefaultRadioGroup() {
return (
AppleOrange
);
}
```
## Props
### RadioGroup.Root
| prop | type | default | description |
| ---------------- | ------------------------------------- | ---------- | ------------------------------------------ |
| `name` | `string \| undefined` | | HTML 폼 제출 시 그룹을 구분하는 name 속성입니다. |
| `value` | `string \| undefined` | | 제어형 모드에서 현재 선택된 항목의 value입니다. |
| `defaultValue` | `string \| undefined` | | 언컨트롤드 모드에서 초기 선택 값을 지정합니다. |
| `onValueChange` | `(value: string) => void` | | 선택 값이 변경될 때 호출되는 콜백 함수입니다. |
| `required` | `boolean \| undefined` | `false` | 폼 유효성 검증을 위해 반드시 값을 선택해야 함을 명시합니다. |
| `disabled` | `boolean \| undefined` | `false` | 라디오 그룹 내 모든 항목을 비활성화합니다. |
| `dir` | `ltr \| rtl \| undefined` | | 텍스트 방향을 설정합니다. |
| `loop` | `boolean \| undefined` | `false` | 키보드 탐색 시 마지막 항목 이후 첫 항목으로 순환하도록 설정합니다. |
| `orientation` | `horizontal \| vertical \| undefined` | `vertical` | Item 배치를 가로 또는 세로 방향으로 설정합니다. |
| `size` | `md \| lg` | `md` | RadioGroup.Item 간의 간격 및 Control 크기를 조정합니다. |
| `invalid` | `boolean \| undefined` | `false` | 폼 유효성 검증 실패 등의 상태를 나타냅니다. |
| `visuallyHidden` | `boolean \| undefined` | `false` | Item의 레이블을 시각적으로 숨기지만 스크린리더에는 읽히도록 합니다. |
### RadioGroup.Item
| prop | type | default | description |
| ---------------- | ---------------------- | ------- | --------------------------------- |
| `value` | `string` | | RadioGroup.Item을 식별하는 고유 값입니다. |
| `disabled` | `boolean \| undefined` | `false` | 해당 항목만 비활성화합니다. |
| `invalid` | `boolean \| undefined` | `false` | 해당 항목 단독으로 유효성 오류 상태를 표시합니다. |
| `size` | `md \| lg` | `md` | 해당 항목의 Control 크기를 조정합니다. |
| `visuallyHidden` | `boolean \| undefined` | `false` | 레이블을 시각적으로 숨기지만 스크린리더에는 읽히도록 합니다. |
### RadioGroup.Control
| prop | type | default | description |
| ---- | --------------------- | ------- | -------------------------------------------------------------------- |
| `id` | `string \| undefined` | | Control 요소의 id를 지정합니다. 생략하면 RadioGroup.Item 내부에서 자동으로 생성된 id가 사용됩니다. |
### RadioGroup.Label
| prop | type | default | description |
| ---------- | --------------------- | ------- | --------------------------- |
| `htmlFor` | `string \| undefined` | | 레이블이 연결될 Control 요소의 id입니다. |
| `children` | `React.ReactNode` | | 레이블에 표시할 텍스트나 노드입니다. |
# Switch
URL: /docs/components/switch
Switch는 사용자가 설정을 on/off로 전환할 수 있게 돕는 토글 컴포넌트입니다.
## Import
```js
import { Switch } from '@vapor-ui/core';
```
## Preview
```tsx
import { Switch } from '@vapor-ui/core';
export default function DefaultSwitch() {
return (
Airplane mode
);
}
```
## Props
### Switch.Root
| prop | type | default | description |
| ----------------- | ---------------------------- | ----------- | ----------------------------------------------------------------- |
| `checked` | `boolean` | `undefined` | 스위치의 현재 상태를 제어하는 제어 모드 prop입니다. true는 켜짐 상태, false는 꺼짐 상태를 의미합니다. |
| `defaultChecked` | `boolean` | `undefined` | 비제어 모드에서 스위치의 초기 상태를 설정합니다. |
| `onCheckedChange` | `(checked: boolean) => void` | `undefined` | 스위치의 상태가 변경될 때 호출되는 콜백입니다. |
| `size` | `sm \| md \| lg` | `md` | 스위치의 크기를 설정합니다. |
| `disabled` | `boolean` | `false` | 스위치를 비활성화하여 사용자 상호 작용을 차단합니다. |
| `visuallyHidden` | `boolean` | `false` | 레이블을 시각적으로 숨깁니다. true 설정 시 레이블이 화면에 표시되지 않지만 스크린 리더는 읽을 수 있습니다. |
### Switch.Control
| prop | type | default | description |
| ---- | --------------------- | ------- | ---------------------------------------------------------------------- |
| `id` | `string \| undefined` | | 컨트롤 요소의 id를 지정합니다. 값을 지정하지 않으면 Switch.Root 단계에서 생성된 고유 id가 자동으로 사용됩니다. |
### Switch.Label
| prop | type | default | description |
| ---------- | --------------------- | ------- | ----------------------------------------------------------------------------------------------------------- |
| `htmlFor` | `string \| undefined` | | 레이블이 연결될 Switch.Control 요소의 id를 지정합니다. 생략하면 같은 Switch.Root 안에서 발견된 Switch.Control id가 자동으로 대입되어 접근성이 유지됩니다. |
| `children` | `React.ReactNode` | | 레이블에 표시할 텍스트나 노드입니다. |
# TextInput
URL: /docs/components/text-input
TextInput은 사용자가 데이터를 입력할 수 있도록 텍스트, 숫자 등 다양한 형식의 입력 필드를 제공합니다.
## Import
```js
import { TextInput } from '@vapor-ui/core';
```
## Preview
```tsx
import { TextInput } from '@vapor-ui/core';
export default function DefaultTextInput() {
return (
Label
);
}
```
## Props
### TextInput.Root
| prop | type | default | description |
| ---------------- | --------------------------------------------------- | ------- | ---------------------------------- |
| `type` | `text \| email \| password \| url \| tel \| search` | `text` | 입력 필드의 HTML 타입을 지정합니다. |
| `value` | `string \| undefined` | | 제어형 컴포넌트로 사용할 때 입력 값입니다. |
| `defaultValue` | `string \| undefined` | | 비제어형 컴포넌트 초기 입력 값입니다. |
| `onValueChange` | `(value: string) => void \| undefined` | | 입력 값이 변경될 때 호출되는 콜백 함수입니다. |
| `placeholder` | `string \| undefined` | | 입력 필드가 비어 있을 때 표시되는 안내 텍스트입니다. |
| `size` | `sm \| md \| lg \| xl` | `md` | 입력 필드의 크기를 설정합니다. |
| `disabled` | `boolean \| undefined` | `false` | 입력 필드를 비활성화합니다. |
| `invalid` | `boolean \| undefined` | `false` | 검증 오류 상태임을 나타냅니다. |
| `readOnly` | `boolean \| undefined` | `false` | 읽기 전용으로 설정하여 값 변경을 방지합니다. |
| `visuallyHidden` | `boolean \| undefined` | `false` | Label을 시각적으로 숨기고 스크린 리더용으로만 제공합니다. |
### TextInput.Label
| prop | type | default | description |
| ----------- | --------------------- | ------- | -------------------------------- |
| `className` | `string \| undefined` | | Label 요소에 적용할 추가 CSS 클래스를 지정합니다. |
| `children` | `React.ReactNode` | | 라벨에 표시할 텍스트 또는 요소입니다. |
### TextInput.Field
| prop | type | default | description |
| ----------- | --------------------- | ------- | ------------------------------------------------- |
| `id` | `string \| undefined` | | 입력 필드의 id를 직접 지정할 수 있습니다. 지정하지 않으면 내부에서 자동 생성됩니다. |
| `className` | `string \| undefined` | | 입력 필드에 추가할 CSS 클래스를 지정합니다. |
## Accessibility Table
TextInput WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다.
Vapor TextInput은 Radix 기능을 기반으로 구축되어 일부 웹 접근성은 Radix에서 제공하고 있습니다.
### 개발 시 준수해야 할 내용을 명시합니다.
| Props | Description |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **label** | 텍스트 입력에는 명확하고 설명적인 가시적 레이블이 있어야 합니다. 요소를 사용하여 텍스트 입력에 접근 가능한 이름을 제공해야 합니다 추가 지침은 aria-describedby를 사용하여 프로그래밍 방식으로 입력과 연결해야 합니다 플레이스홀더 텍스트는 레이블을 대체할 수 없습니다. 플레이스홀더 텍스트는 입력에 값이 입력되면 사라지고, 색상 대비가 낮아 접근성 요구사항을 충족하지 못할 수 있습니다 |
| **id** | TextInput에 고유한 id 속성을 부여합니다. |
| **htmlFor** | 연관된 레이블 요소에 htmlFor 속성을 사용하여 TextInput의 id 를 참조 |
**label Example:**
```tsx
Label
```
**id Example:**
```tsx
Label
```
**htmlFor Example:**
```tsx
Label
```
### 컴포넌트 내부적으로 준수되고 있는 접근성 기능을 명시합니다.
| Accessibility | Description |
| ------------- | --------------------------------------------------- |
| **id** | Props로 id와 htmlFor를 넘겨주지 않는 경우, 내부적으로 자동으로 생성해 줍니다. |
# Text
URL: /docs/components/text
Text 컴포넌트는 시멘틱 태그와 타이포그래피·색상 토큰을 조합하여 텍스트 스타일을 설정합니다.
## Import
```js
import { Text } from '@vapor-ui/core';
```
## Preview
```tsx
import { Text } from '@vapor-ui/core';
export default function DefaultText() {
return vapor;
}
```
## Props
### Text
| prop | type | default | description |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------- |
| `typography` | `display1 \| display2 \| display3 \| display4 \| heading1 \| heading2 \| heading3 \| heading4 \| heading5 \| heading6 \| subtitle1 \| subtitle2 \| body1 \| body2 \| body3 \| body4 \| code1 \| code2 \| undefined` | | 적용할 타이포그래피 스타일 토큰입니다. |
| `foreground` | `primary \| primary-darker \| secondary \| secondary-darker \| success \| success-darker \| warning \| warning-darker \| danger \| danger-darker \| hint \| hint-darker \| contrast \| contrast-darker \| normal \| normal-lighter \| accent \| accent-darker \| undefined` | | 텍스트 색상을 지정하는 전경색 토큰입니다. |
| `asChild` | `boolean` | `false` | HTML 시멘틱 태그를 변경하기 위해 사용합니다. 예: p, strong, h1 등. |
| `children` | `React.ReactNode` | | 텍스트 내용입니다. |
## Accessibility Table
Text WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다.
Vapor Text는 Radix 기능을 기반으로 구축되어 일부 웹 접근성은 Radix에서 제공하고 있습니다.
### 개발 시 준수해야 할 내용을 명시합니다.
| Props | Description |
| ----------- | --------------------------------------------------------------------------------------------------------------------- |
| **asChild** | asChild 속성을 사용하여 컴포넌트의 기본 태그를 변경할 수 있습니다. 기본값은 span 태그입니다. 해당 prop은 시맨틱 마크업을 준수하기 위해 다양한 HTML 요소를 사용할 수 있도록 합니다. |
**asChild Example:**
```tsx
h1 태그를 사용합니다.
p태그를 사용합니다.
```
### 컴포넌트 내부적으로 준수되고 있는 접근성 기능을 명시합니다.
| Accessibility | Description |
| ------------- | ------------------------------------------------------------------------------ |
| **ref** | ref 속성을 사용하여 컴포넌트에 대한 참조를 전달할 수 있습니다. 이는 포커스 관리, 텍스트 조작 및 기타 접근성 기능 구현에 유용합니다. |
**ref Example:**
```tsx
const textRef = useRef(null);
return (
접근성을 위해 참조를 사용하는 텍스트
);
```
# Installation
URL: /docs/getting-started/installation
Vapor UI 설치를 위한 가이드.
요구사항:
React 18 or later
Node.js 16 or later
***
### 1. 패키지 설치
Vapor UI를 설치하세요:
{/* prettier-ignore */}
```package-install
npm install @vapor-ui/core@latest
```
### 2. 스타일 추가
애플리케이션 루트에 스타일을 추가하세요:
> Next.js의 경우, `layout.tsx` 파일에 스타일을 추가해야 합니다.
{/* prettier-ignore */}
```tsx
import '@vapor-ui/core/styles.css';
```
```css
@import '@vapor-ui/core/styles.css';
```
### 3. 컴포넌트 구성하기
이제 React 애플리케이션에서 Vapor UI 컴포넌트를 사용할 수 있습니다. 다음은 간단한 컴포넌트를 구성하는 예시입니다:
```tsx
import { Card } from "@vapor-ui/core";
export default function AssembleComponent() {
return (
컴포넌트 구성하기
이것은 Vapor UI를 사용하여 컴포넌트를 구성하는 예시입니다.
);
}
```
# LLMs.txt
URL: /docs/getting-started/llms-txt
Cursor 등 AI 도구에서 Vapor Design System 문서를 활용하는 방법
## LLMs.txt란 무엇인가?
`LLMs.txt`는 Vapor Design System의 문서를 LLM(Large Language Model)이 잘 이해하도록 구조화한 텍스트 파일입니다. 컨텍스트 창(context window)이 제한된 AI 도구에서 핵심 정보를 빠르게 파악할 수 있게 돕습니다.
***
## 제공 파일 구성
| 파일명 | 설명 |
| --------------- | ---------------------------------------------------------- |
| `llms.txt` | 전체 라우트 및 카테고리 개요를 포함한 메인 인덱스 파일 |
| `llms-full.txt` | Vapor Design System의 모든 문서(컴포넌트, 가이드, API 등)를 포함한 전체 문서 세트 |
### 메인 인덱스
* [`llms.txt`](/llms.txt) : 각 문서에 대한 요약과 링크가 포함되어 있으며, AI가 필요한 자료를 따라갈 수 있도록 구성됩니다
* [`llms-full.txt`](/llms-full.txt) : 모든 내용을 담아 큰 컨텍스트를 사용하는 워크플로우에 적합합니다
### 세부 문서
* 가이드: [`/docs/getting-started/installation.mdx`](/docs/getting-started/installation.mdx): Vapor UI 설치를 위한 가이드.
* 디자인 토큰
* [`/docs/tokens/color.mdx`](/docs/tokens/color.mdx): 디자인 토큰에 대한 상세 문서로, 색상 시스템을 정의합니다.
* [`/docs/tokens/size.mdx`](/docs/tokens/size.mdx): 디자인 토큰에 대한 상세 문서로, 크기 및 여백을 정의합니다.
* [`/docs/tokens/typography.mdx`](/docs/tokens/typography.mdx): 디자인 토큰에 대한 상세 문서로, 타이포그래피 시스템을
* 테마 변경:
* [`/docs/getting-started/theming.mdx`](/docs/getting-started/theming.mdx): Next.js 앱에서 테마를 변경하는 방법에 대한 가이드.
* 컴포넌트
* [`/docs/components/[component-name].mdx`](/docs/components/avatar.mdx): 컴포넌트별 상세 문서로, 각 컴포넌트의 사용법과 API를 포함합니다. (예: Avatar)
***
## AI 도구와 함께 사용하기
Cursor 등 LLM 기반 코드 도구에서 LLMs 텍스트 파일을 활용하려면 `@Docs` 기능을 사용하세요.
[Cursor @Docs](https://docs.cursor.com/context/@-symbols/@-docs)
# Overview
URL: /docs/getting-started/overview
Vapor는 구름의 세 번째 디자인 시스템으로, 일관된 UI와 개발 생산성을 위해 설계되었습니다.
## Vapor Design System란?
Vapor는 구름에서 개발한 통합 디자인 시스템으로, 다양한 제품과 서비스에 일관된 사용자 경험을 제공합니다.
### 주요 특징
* **모듈화**: Theme, Hooks, Icons, Core 등 서브 패키지로 구성
* **높은 커스터마이즈성**: 최소한의 제약, 최대한의 확장성
* **웹 접근성 준수**: A11Y, ARIA 속성, 키보드 네비게이션 등 기본 지원
* **유지보수 용이**: 재사용 가능한 토큰과 컴포넌트 구조
### 목적
* 빠르고 일관된 UI 개발 지원
* 다양한 서비스 요구사항에 유연하게 대응
* 디자인과 개발 간의 효율적인 협업 촉진
***
## Components
# Tailwind CSS v4
URL: /docs/getting-started/tailwindcss-v4
Vapor UI를 Tailwind CSS v4 환경에 통합하는 방법을 안내합니다.
## Quick Start
프로젝트의 메인 CSS 파일(예: `global.css`)에 아래 코드를 순서대로 복사하여 붙여넣으세요.
```css
/* global.css */
/* 1. 파일 최상단에서 전체 Layer 순서를 정의합니다. */
@layer tw-theme, theme, reset, components, utilities, tw-utilities;
/* 2. Tailwind와 Vapor UI 스타일을 불러옵니다. */
@import 'tailwindcss/theme.css' layer(tw-theme);
@import 'tailwindcss/utilities.css' layer(tw-utilities);
@import '@vapor-ui/core/styles.css';
@import '@vapor-ui/core/tailwind.css';
```
이 설정만으로 Vapor UI와 Tailwind CSS를 함께 사용하기 위한 모든 준비가 완료됩니다.
## Styling with Vapor Utility Classes
`@vapor-ui/core/tailwind.css`를 추가하면 Vapor UI의 디자인 토큰을 활용하는 다양한 유틸리티 클래스를 사용할 수 있습니다.
모든 클래스는 `v-` 접두사를 가집니다.
#### 테마 토큰 클래스
Vapor UI의 디자인 토큰은 `@theme` 규칙을 통해 Tailwind CSS의 네이티브 테마 시스템에 통합됩니다.
각 토큰은 `color`, `spacing`, `radius` 등과 같은 네임스페이스로 그룹화되어 있습니다.
사용법은 각 네임스페이스에 속한 토큰 이름에 `v-` 접두사를 붙여 Tailwind의 표준 유틸리티 클래스와 조합하면 됩니다.
* **color 네임스페이스**
* 토큰 예시: \`--color-v-blue-500, --color-v-red-300, --color-v-gray-900, ...
* 사용 예시: `bg-v-blue-500`, `text-v-red-300`, `border-v-gray-900`, ...
* **spacing 네임스페이스**
* 토큰 예시: `--spacing-v-100`, `--spacing-v-200`, `--spacing-v-400`, ...
* 사용 예시: `p-v-100`, `m-v-200`, `gap-v-400`, `w-v-400`, ...\`
* **radius 네임스페이스**
* 토큰 예시: `--radius-v-200`, `--radius-v-400`, ...
* 사용 예시: `rounded-v-200`, `rounded-t-v-400`, ...
* **font-weight 네임스페이스**
* 토큰 예시: `--font-weight-v-400`, `--font-weight-v-700`, ...
* 사용 예시: `font-v-400`, `font-v-700`, ...
각 네임스페이스와 조합할 수 있는 전체 유틸리티 클래스 목록(예: `bg-`, `p-`, `w-`, `h-`, `border-` 등)은 [Tailwind CSS 공식 문서](https://tailwindcss.com/docs/theme#theme-variable-namespaces) 에서 확인하실 수 있습니다.
#### 시맨틱 유틸리티 클래스
'주요 배경색', '위험 상태 텍스트' 등 의미에 기반한 고유한 유틸리티 클래스도 제공합니다.
이 클래스들은 Vapor UI에만 존재하므로 아래 리스트를 통해 확인할 수 있습니다.
**배경색 (Background Colors)**
`bg-v-primary`, `bg-v-secondary`, `bg-v-success`, `bg-v-warning`, `bg-v-danger`, `bg-v-hint`, `bg-v-contrast`, `bg-v-normal`, `bg-v-normal-lighter`, `bg-v-normal-darker`
**글자색 (Text Colors)**
`text-v-primary`, `text-v-primary-darker`, `text-v-secondary`, `text-v-secondary-darker`, `text-v-success`, `text-v-success-darker`, `text-v-warning`, `text-v-warning-darker`, `text-v-danger`, `text-v-danger-darker`, `text-v-hint`, `text-v-hint-darker`, `text-v-contrast`, `text-v-contrast-darker`, `text-v-accent`, `text-v-normal`, `text-v-normal-lighter`, `text-v-logo`
**테두리색 (Border Colors)**
`border-v-primary`, `border-v-secondary`, `border-v-normal`, `border-v-success`, `border-v-warning`, `border-v-danger`, `border-v-hint`, `border-v-contrast`
## Core Concepts
#### CSS Layer와 우선순위
Vapor UI와 Tailwind CSS의 통합은 CSS의 `@layer` 규칙을 기반으로 동작합니다. 'Quick Start'에서 설정한 코드는 다음과 같은 스타일 우선순위 계층을 만듭니다.
**우선순위 (낮음 → 높음):**
1. `tw-theme`: Tailwind의 기본 테마 변수
2. `theme`: Vapor UI의 커스텀 테마 변수
3. `reset`: Vapor UI의 브라우저 스타일 초기화
4. `components`: Vapor UI 컴포넌트의 기본 스타일
5. `utilities`: Vapor UI의 보조 유틸리티 클래스
6. `tw-utilities`: Tailwind의 유틸리티 클래스 **(가장 높은 우선순위)**
이 구조의 핵심은 Tailwind 유틸리티(`tw-utilities`)가 항상 가장 높은 우선순위를 갖는 것입니다.
덕분에 개발자는 `className="bg-blue-500 text-white"`와 같은 Tailwind 클래스를 사용하여 Vapor UI 컴포넌트의 기본 스타일을 언제든지 쉽게 재정의할 수 있습니다.
#### CSS Reset 정책
스타일 초기화(Reset)는 라이브러리 간 충돌이 발생하기 쉬운 부분이므로, Vapor UI의 정책을 이해하는 것이 중요합니다.
권장: Vapor UI의 자체 Reset 사용
Vapor UI는 `@layer reset`을 통해 자체적으로 필요한 최소한의 브라우저 스타일 초기화를 수행합니다.
따라서 **Tailwind CSS의 `preflight.css`를 별도로 불러오는 것을 권장하지 않습니다.**
두 개의 Reset을 함께 사용하면 예상치 못한 스타일 충돌이 발생하거나, 일관성이 깨질 수 있습니다.
만약 프로젝트의 특정 요구사항으로 인해 Tailwind의 `preflight.css`를 반드시 사용해야 한다면,
`@layer` 순서를 직접 제어하여 preflight가 Vapor UI의 reset보다 낮은 우선순위를 갖도록 설정해야
합니다.
예를 들어, 다음과 같이 순서를 조정할 수 있습니다.
```css
/* globals.css (예시) */
@layer tw-theme, theme, tw-base, reset, components, utilities, tw-utilities;
@import 'tailwindcss/theme.css' layer(tw-theme);
@import 'tailwindcss/utilities.css' layer(tw-utilities);
@import 'tailwindcss/preflight.css' layer(tw-base); /* 추가 */
@import '@vapor-ui/core/styles.css';
@import '@vapor-ui/core/tailwind.css';
```
**참고**
* [Tailwind Preflight](https://tailwindcss.com/docs/preflight)
# Theming
URL: /docs/getting-started/theming
Vapor UI 테마 시스템을 설정하는 방법
# Vapor UI 테마 시스템 설정 가이드
다음과 같은 테마 옵션을 손쉽게 커스텀할 수 있습니다.
1. **대표 색상 (`primaryColor`)** : Hex 코드로 UI의 주요 색상을 지정합니다.
2. **디자인 모드 (`appearance`)** : 'light' 또는 'dark'로 테마를 설정합니다.
3. **둥글기 (`radius`)** : 컴포넌트 모서리의 둥근 정도를 단계별로 조절합니다.
4. **크기 (`scaling`)** : UI 요소의 전체적인 크기 배율을 설정합니다.
## 1. Next.js (App Router)
1. **패키지 설치**
```package-install
npm install @vapor-ui/core@latest
```
2. **테마 설정 파일 생성**\
(예시: `lib/theme.config.ts`)
```tsx
import { createThemeConfig } from '@vapor-ui/core';
export const themeConfig = createThemeConfig({
appearance: 'light',
radius: 'full',
scaling: 1.0,
storageKey: 'my-vapor-theme',
primaryColor: '#ffc107', // hex code로 설정
});
```
3. **Root layout.tsx에 적용**
```tsx
import { ThemeProvider, ThemeScript } from '@vapor-ui/core';
import '@vapor-ui/core/dist/styles.css';
// createThemeConfig를 상단에 추가하거나, 별도 설정 파일에서 import합니다.
export default function RootLayout({ children }) {
return (
{children}
);
}
```
***
## 2. Vite
1. **패키지 설치**
```package-install
npm install @vapor-ui/core@latest
```
2. **index.html에 FOUC 방지 스크립트 추가**
```html
```
3. **ThemeProvider 설정**
```tsx
// src/main.tsx
import { ThemeProvider, createThemeConfig } from '@vapor-ui/core';
import '@vapor-ui/core/styles.css';
const themeConfig = createThemeConfig({
appearance: 'light',
radius: 'full',
scaling: 1.0,
primaryColor: '#ffc107', // hex code로 설정
storageKey: 'my-vapor-theme',
});
ReactDOM.createRoot(document.getElementById('root')!).render(
,
);
```
***
## 3. Tailwind CSS
* Tailwind CSS와 Vapor UI의 CSS 변수를 통합하는 방법, Tailwind의 `dark:` variant와 Vapor UI 다크 모드 연동법 등은 **추후 문서로 제공될 예정**입니다.
***
이렇게 환경별로 설정만 빠르게 적용하면 Vapor UI의 테마 시스템을 사용할 수 있습니다.
# Color
URL: /docs/tokens/color
컬러 토큰은 브랜드의 정체성과 사용자 경험을 지원하는 다양한 색상을 정의합니다.
| token | value |
| ----------------------------------------- | ------- |
| --vapor-color-black | #000000 |
| --vapor-color-white | #ffffff |
| --vapor-color-gray-100 | #f0f0f5 |
| --vapor-color-gray-200 | #e8e8ee |
| --vapor-color-gray-300 | #e1e1e8 |
| --vapor-color-gray-400 | #cdced6 |
| --vapor-color-gray-500 | #8c8f9f |
| --vapor-color-gray-600 | #6c6e7e |
| --vapor-color-gray-700 | #525463 |
| --vapor-color-gray-800 | #3e404c |
| --vapor-color-gray-900 | #2b2d36 |
| --vapor-color-gray-950 | #252730 |
| --vapor-color-gray-000 | #ffffff |
| --vapor-color-gray-050 | #f7f7fa |
| --vapor-color-red-100 | #f9d6d7 |
| --vapor-color-red-200 | #f2adaf |
| --vapor-color-red-300 | #ec8587 |
| --vapor-color-red-400 | #e55c5f |
| --vapor-color-red-500 | #df3337 |
| --vapor-color-red-600 | #be2b2f |
| --vapor-color-red-700 | #9c2427 |
| --vapor-color-red-800 | #861f21 |
| --vapor-color-red-900 | #701a1c |
| --vapor-color-red-050 | #fcebeb |
| --vapor-color-pink-100 | #f8d5e3 |
| --vapor-color-pink-200 | #f0acc7 |
| --vapor-color-pink-300 | #e982ac |
| --vapor-color-pink-400 | #e15990 |
| --vapor-color-pink-500 | #da2f74 |
| --vapor-color-pink-600 | #b92863 |
| --vapor-color-pink-700 | #992151 |
| --vapor-color-pink-800 | #831c46 |
| --vapor-color-pink-900 | #6d183a |
| --vapor-color-pink-050 | #fbeaf1 |
| --vapor-color-grape-100 | #f2d5f9 |
| --vapor-color-grape-200 | #e5abf3 |
| --vapor-color-grape-300 | #d880ee |
| --vapor-color-grape-400 | #cb56e8 |
| --vapor-color-grape-500 | #be2ce2 |
| --vapor-color-grape-600 | #a225c0 |
| --vapor-color-grape-700 | #851f9e |
| --vapor-color-grape-800 | #721a88 |
| --vapor-color-grape-900 | #5f1671 |
| --vapor-color-grape-050 | #f8eafc |
| --vapor-color-violet-100 | #e7ddfe |
| --vapor-color-violet-200 | #cfbbfd |
| --vapor-color-violet-300 | #b798fb |
| --vapor-color-violet-400 | #9f76fa |
| --vapor-color-violet-500 | #8754f9 |
| --vapor-color-violet-600 | #7347d4 |
| --vapor-color-violet-700 | #5f3bae |
| --vapor-color-violet-800 | #513295 |
| --vapor-color-violet-900 | #442a7d |
| --vapor-color-violet-050 | #f3eefe |
| --vapor-color-blue-100 | #d4e2fd |
| --vapor-color-blue-200 | #aac5fa |
| --vapor-color-blue-300 | #7fa9f8 |
| --vapor-color-blue-400 | #558cf5 |
| --vapor-color-blue-500 | #2a6ff3 |
| --vapor-color-blue-600 | #245ecf |
| --vapor-color-blue-700 | #1d4eaa |
| --vapor-color-blue-800 | #194392 |
| --vapor-color-blue-900 | #15387a |
| --vapor-color-blue-050 | #eaf1fe |
| --vapor-color-cyan-100 | #cfe6ec |
| --vapor-color-cyan-200 | #9fcdd9 |
| --vapor-color-cyan-300 | #6eb3c6 |
| --vapor-color-cyan-400 | #3e9ab3 |
| --vapor-color-cyan-500 | #0e81a0 |
| --vapor-color-cyan-600 | #0c6e88 |
| --vapor-color-cyan-700 | #0a5a70 |
| --vapor-color-cyan-800 | #084d60 |
| --vapor-color-cyan-900 | #074150 |
| --vapor-color-cyan-050 | #e7f2f5 |
| --vapor-color-green-100 | #cee7e3 |
| --vapor-color-green-200 | #9dcfc7 |
| --vapor-color-green-300 | #6cb6aa |
| --vapor-color-green-400 | #3b9e8e |
| --vapor-color-green-500 | #0a8672 |
| --vapor-color-green-600 | #097261 |
| --vapor-color-green-700 | #075e50 |
| --vapor-color-green-800 | #065044 |
| --vapor-color-green-900 | #054339 |
| --vapor-color-green-050 | #e6f3f1 |
| --vapor-color-lime-100 | #e9f6d4 |
| --vapor-color-lime-200 | #d2eda9 |
| --vapor-color-lime-300 | #bce57d |
| --vapor-color-lime-400 | #a5dc52 |
| --vapor-color-lime-500 | #8fd327 |
| --vapor-color-lime-600 | #7ab321 |
| --vapor-color-lime-700 | #64941b |
| --vapor-color-lime-800 | #567f17 |
| --vapor-color-lime-900 | #486a14 |
| --vapor-color-lime-050 | #f4fbe9 |
| --vapor-color-yellow-100 | #fef1cc |
| --vapor-color-yellow-200 | #fde499 |
| --vapor-color-yellow-300 | #fcd666 |
| --vapor-color-yellow-400 | #fbc933 |
| --vapor-color-yellow-500 | #fabb00 |
| --vapor-color-yellow-600 | #d59f00 |
| --vapor-color-yellow-700 | #af8300 |
| --vapor-color-yellow-800 | #967000 |
| --vapor-color-yellow-900 | #7d5e00 |
| --vapor-color-yellow-050 | #fef8e5 |
| --vapor-color-orange-100 | #f6dbcd |
| --vapor-color-orange-200 | #edb69b |
| --vapor-color-orange-300 | #e39269 |
| --vapor-color-orange-400 | #da6d37 |
| --vapor-color-orange-500 | #d14905 |
| --vapor-color-orange-600 | #b23e04 |
| --vapor-color-orange-700 | #923304 |
| --vapor-color-orange-800 | #7d2c03 |
| --vapor-color-orange-900 | #692503 |
| --vapor-color-orange-050 | #faede6 |
| --vapor-color-background-primary | #2a6ff3 |
| --vapor-color-background-secondary | #e8e8ee |
| --vapor-color-background-success | #0a8672 |
| --vapor-color-background-warning | #d14905 |
| --vapor-color-background-danger | #df3337 |
| --vapor-color-background-hint | #6c6e7e |
| --vapor-color-background-contrast | #3e404c |
| --vapor-color-background-normal | #ffffff |
| --vapor-color-background-normal-lighter | #ffffff |
| --vapor-color-background-normal-darker | #f7f7fa |
| --vapor-color-foreground-primary | #245ecf |
| --vapor-color-foreground-primary-darker | #1d4eaa |
| --vapor-color-foreground-secondary | #3e404c |
| --vapor-color-foreground-secondary-darker | #2b2d36 |
| --vapor-color-foreground-success | #097261 |
| --vapor-color-foreground-success-darker | #075e50 |
| --vapor-color-foreground-warning | #b23e04 |
| --vapor-color-foreground-warning-darker | #923304 |
| --vapor-color-foreground-danger | #be2b2f |
| --vapor-color-foreground-danger-darker | #9c2427 |
| --vapor-color-foreground-hint | #6c6e7e |
| --vapor-color-foreground-hint-darker | #525463 |
| --vapor-color-foreground-contrast | #3e404c |
| --vapor-color-foreground-contrast-darker | #2b2d36 |
| --vapor-color-foreground-accent | #ffffff |
| --vapor-color-foreground-normal | #2b2d36 |
| --vapor-color-foreground-normal-lighter | #525463 |
| --vapor-color-border-normal | #e1e1e8 |
| --vapor-color-border-primary | #2a6ff3 |
| --vapor-color-border-secondary | #e8e8ee |
| --vapor-color-border-success | #0a8672 |
| --vapor-color-border-warning | #d14905 |
| --vapor-color-border-danger | #df3337 |
| --vapor-color-border-hint | #6c6e7e |
| --vapor-color-border-contrast | #3e404c |
| --vapor-color-logo-normal | #2b2d36 |
# Size
URL: /docs/tokens/size
요소의 크기,여백과 관련된 값을 정의하여 일관된 디자인을 유지하는 데 도움을 줍니다.
| token | value |
| ----------------------------- | -------- |
| --vapor-size-borderRadius-000 | 0rem |
| --vapor-size-borderRadius-050 | 0.125rem |
| --vapor-size-borderRadius-100 | 0.25rem |
| --vapor-size-borderRadius-200 | 0.375rem |
| --vapor-size-borderRadius-300 | 0.5rem |
| --vapor-size-borderRadius-400 | 0.75rem |
| --vapor-size-borderRadius-500 | 1rem |
| --vapor-size-borderRadius-600 | 1.25rem |
| --vapor-size-borderRadius-700 | 1.5rem |
| --vapor-size-borderRadius-800 | 2rem |
| --vapor-size-borderRadius-900 | 2.5rem |
| --vapor-size-space-000 | 0rem |
| --vapor-size-space-025 | 0.125rem |
| --vapor-size-space-050 | 0.25rem |
| --vapor-size-space-075 | 0.375rem |
| --vapor-size-space-100 | 0.5rem |
| --vapor-size-space-150 | 0.75rem |
| --vapor-size-space-175 | 0.875rem |
| --vapor-size-space-200 | 1rem |
| --vapor-size-space-225 | 1.125rem |
| --vapor-size-space-250 | 1.25rem |
| --vapor-size-space-300 | 1.5rem |
| --vapor-size-space-400 | 2rem |
| --vapor-size-space-500 | 2.5rem |
| --vapor-size-space-600 | 3rem |
| --vapor-size-space-700 | 3.5rem |
| --vapor-size-space-800 | 4rem |
| --vapor-size-space-900 | 4.5rem |
| --vapor-size-dimension-025 | 0.125rem |
| --vapor-size-dimension-050 | 0.25rem |
| --vapor-size-dimension-075 | 0.375rem |
| --vapor-size-dimension-100 | 0.5rem |
| --vapor-size-dimension-150 | 0.75rem |
| --vapor-size-dimension-175 | 0.875rem |
| --vapor-size-dimension-200 | 1rem |
| --vapor-size-dimension-225 | 1.125rem |
| --vapor-size-dimension-250 | 1.25rem |
| --vapor-size-dimension-300 | 1.5rem |
| --vapor-size-dimension-400 | 2rem |
| --vapor-size-dimension-500 | 2.5rem |
| --vapor-size-dimension-600 | 3rem |
| --vapor-size-dimension-700 | 3.5rem |
| --vapor-size-dimension-800 | 4rem |
# Typography
URL: /docs/tokens/typography
텍스트의 스타일과 형식을 정의하여 일관된 글꼴 사용과 가독성을 보장합니다.
| token | value |
| ------------------------------------ | ---------- |
| --vapor-typography-fontFamily-sans | Pretendard |
| --vapor-typography-fontFamily-code | FiraCode |
| --vapor-typography-fontSize-025 | 10px |
| --vapor-typography-fontSize-050 | 12px |
| --vapor-typography-fontSize-075 | 14px |
| --vapor-typography-fontSize-100 | 16px |
| --vapor-typography-fontSize-200 | 18px |
| --vapor-typography-fontSize-300 | 20px |
| --vapor-typography-fontSize-400 | 24px |
| --vapor-typography-fontSize-500 | 32px |
| --vapor-typography-fontSize-600 | 38px |
| --vapor-typography-fontSize-700 | 48px |
| --vapor-typography-fontSize-800 | 64px |
| --vapor-typography-fontSize-900 | 80px |
| --vapor-typography-fontSize-1000 | 120px |
| --vapor-typography-fontWeight-400 | regular |
| --vapor-typography-fontWeight-500 | medium |
| --vapor-typography-fontWeight-700 | bold |
| --vapor-typography-fontWeight-800 | extra-bold |
| --vapor-typography-letterSpacing-000 | 0 |
| --vapor-typography-letterSpacing-100 | -0.1px |
| --vapor-typography-letterSpacing-200 | -0.2px |
| --vapor-typography-letterSpacing-300 | -0.3px |
| --vapor-typography-letterSpacing-400 | -0.4px |
| --vapor-typography-lineHeight-025 | 14px |
| --vapor-typography-lineHeight-050 | 18px |
| --vapor-typography-lineHeight-075 | 22px |
| --vapor-typography-lineHeight-100 | 24px |
| --vapor-typography-lineHeight-200 | 26px |
| --vapor-typography-lineHeight-300 | 30px |
| --vapor-typography-lineHeight-400 | 36px |
| --vapor-typography-lineHeight-500 | 48px |
| --vapor-typography-lineHeight-600 | 56px |
| --vapor-typography-lineHeight-700 | 62px |
| --vapor-typography-lineHeight-800 | 84px |
| --vapor-typography-lineHeight-900 | 104px |
| --vapor-typography-lineHeight-1000 | 156px |