Брендбук ВКонтакте (VK) — скачать логотипы и иконки мессенджера

<button class="vk-btn vk-btn--accent">Отправить</button>

.vk-btn {
  font-family: "VK Sans Display", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 12px;
  border: none;
  background: #0077FF;
  color: #fff;
  cursor: pointer;
}

import { Button } from "@vkhub/vk-ui";

<Button appearance="accent">Отправить</Button>

<input type="text" class="vk-input" placeholder="Введите сообщение..." />

.vk-input {
  font-family: "VK Sans Display", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #EDEEF2;
  outline: none;
  width: 100%;
}

import { Input } from "@vkhub/vk-ui";

<Input placeholder="Введите сообщение..." />

<label class="vk-switch"><input type="checkbox" checked /><span class="vk-switch__track"><span class="vk-switch__thumb"></span></span></label>

.vk-switch { display: inline-flex; cursor: pointer; }
.vk-switch input { display: none; }
.vk-switch__track {
  width: 52px; height: 32px; border-radius: 16px;
  background: #ccc; position: relative;
}
.vk-switch input:checked + .vk-switch__track { background: #0077FF; }
.vk-switch__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff;
}
.vk-switch input:checked + .vk-switch__track .vk-switch__thumb {
  transform: translate(20px);
}

import { Switch } from "@vkhub/vk-ui";

<Switch checked={true} />

<div class="vk-avatar"><span>А</span></div>

.vk-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #0077FF;
  color: #fff; font-weight: 700;
}

import { Avatar } from "@vkhub/vk-ui";

<Avatar size={48} name="Алексей" />

<div class="vk-spinner"></div>

.vk-spinner {
  width: 28px; height: 28px;
  border: 3px solid #EDEEF2;
  border-top-color: #0077FF;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

import { Spinner } from "@vkhub/vk-ui";

<Spinner />

<span class="vk-counter">5</span>

.vk-counter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: #ff303c; color: #fff;
  font-size: 11px; font-weight: 700;
}

import { Counter } from "@vkhub/vk-ui";

<Counter count={5} />

<div class="vk-search"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input type="text" placeholder="Поиск..." class="vk-search__input" /></div>

.vk-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  background: #EDEEF2; border: 1px solid #EDEEF2;
}
.vk-search__input {
  border: none; background: none; outline: none; font-size: 14px; width: 100%;
}

import { SearchInput } from "@vkhub/vk-ui";

<SearchInput placeholder="Поиск..." />

<button class="vk-icon-btn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg></button>

.vk-icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: #EDEEF2; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

import { IconButton } from "@vkhub/vk-ui";

<IconButton icon={<SendIcon />} appearance="accent" />