💎
Prizm Design System Documentation
ShowcaseGitHubRepot a Bug
  • About Prizm
    • Дизайн-система Prizm
    • Changelog
    • License
  • Guidelines
    • ⭕Accessibility
    • ⭕Colors
    • 🚧Design Tokens
      • Color
      • Border Radius
      • Box Shadow
      • Font
      • Line Height
      • Size
      • Space
      • Transition
      • Page
    • ⭕Grid
    • ⭕Iconography
    • ⭕Naming
    • ⭕Typography
    • 🚧Validation
  • Components
    • 🚧Accordion
    • 🚧Breadcrumbs
    • 🚧Buttons
      • Text Button
      • Icon Buttn
      • Split Button
    • 🚧Calendars
      • Calendar
      • Calendar Range
      • ⭕Calendar Month
      • Calendar Year
    • ⭕Card
    • 🚧Checkbox
    • 🚧Chips
    • 🚧Dialogs
      • Confirm dialog
      • Dialog
      • Sidebar
    • ⭕Hierarchy
    • Hint
    • 🚧Indicator
      • 🚧Counter
      • ⭕Point
      • ⭕Icon
    • 🚧Inputs
      • Chips
      • Chips Select
      • Chips Combobox
      • Date
      • Datе Time Range
      • Date Range
    • Navigation menu
    • 🚧Navigation Panel
      • Header
      • Navigation menu
    • 🚧Dropdown Menu
      • Context Menu
      • Dropdown Menu
    • 🚧Paginator
    • 🚧Panel
    • 🚧Progress
      • Bar
      • Spinner
    • 🚧RadioButton
    • 🚧Scrollbar
    • 🚧Shell
    • ⭕Skeleton
    • 🚧Slider
    • 🚧Splitter
    • 🚧Status Panel
    • 🚧Stepper
    • 🚧Switcher
    • ⭕Table
      • Настройки таблицы
    • 🚧Tab
    • Time Picker
    • 🚧Toast
    • 🚧Toggle
    • 🚧Tooltip
    • Tree
      • Tree Chevrone
      • Tree Line
    • 🚧Widget
  • Patterns
    • ⭕403 / 404
    • Query builder
    • ⭕Cron
    • None content
    • ⭕Group Content
    • ⭕File Upload
    • ⭕Side Menu
    • ⭕Zoom Control
Powered by GitBook
On this page
  • Обзор
  • Анатомия
  • Текст
  • Иконка
  • Типы

Was this helpful?

  1. Components
  2. Buttons

Text Button

PreviousButtonsNextIcon Buttn

Last updated 11 months ago

Was this helpful?

Текстовая кнопка используется, когда необходимо обозначить ключевое или стартовое действие на странице. Например, начать заполнение формы или завершить работу с формой (сохранить). Кнопка с иконкой используется в случаях, когда, недостаточно только текста или только иконки, чтобы проинформировать о действии. Иконки следует располагать либо слева, либо справа от текста.

Обзор

Анатомия

Текст

Текст кнопки - одна из наиболее важных ее составляющих

Иконка

Текст кнопки можно дополнять иконкой либо использовать только иконку в качестве альтернативы тексту. Иконка должна быть подобрана в соответствии с действием. Она поможет быстрее найти нужную кнопку в ряду других и быстрее понять, что она делает.

Типы

Текстовая кнопка используется, когда необходимо обозначить ключевое или стартовое действие на странице. Например, начать заполнение формы или завершить работу с формой (сохранить). Кнопка с иконкой используется в случаях, когда, недостаточно только текста или только иконки, чтобы проинформировать о действии. Иконки следует располагать либо слева, либо справа от текста.

Кнопки могут отображать иконки вместо текста. Иконки, однако, должны быть моноширинными внутри кнопки. Используются в основном на панелях управления. Используются там, где размеры не позволяют использовать вариант кнопки с текстом.

Содержит несколько команд, объединенных по смыслу. Она разделена на две части, первая часть которой выполняет основное действие, а вторая - дополнительные действия, которые можно выбрать в выпадающем списке.

🚧
Text Button
Icon Buttn
Split Button
Используйте текст, который явно сообщит пользователю о действии, которое произойдет при клике
Пишите текст кнопки инфинитивом в совершенной форме — текст должен отвечать на вопрос «Что сделать?». Пользователь дает команду компьютеру, ориентированную на результат, а не процесс
Существуют исключения, когда текст кнопки формулируется от первого лица
Не рекомендуется писать текст кнопки в две строки: делайте кнопку шире или меняйте текст
Нельзя сокращать текст кнопки, если он не не помещается
Не используйте две иконки в одной кнопке