Button

Отображает кнопку

Согласно дизайн-системе Платформы Multi-D и в зависимости от выполняемой функции имеет несколько режимов работы
и вариантов стилизации.

  <Button
    Text="Primary" 
    Style="Primary" 
  />

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
CSS	Массив строк-классов CSS-стилей компонента	array
Disabled	Признак состояния компонента Отключен	boolean
FullWidth	Признак автоматически назначаемой ширины кнопки согласно ширине родительского компонента	boolean
Hidden	Признак состояния компонента Скрыт	boolean
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
Mode	Режим работы кнопки	enum	Button	Button - По нажатию кнопки происходят только действия, описываемые в обработчике события Reset - По нажатию кнопки введенные на странице данные очищаются, и страница перезагружается Submit - По нажатию кнопки данные на странице отправляются на сервер, и страница перезагружается
OnClick	Обработчик события MouseClick	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnUnmount	Обработчик события Unmount	undefined
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
Style	Стиль кнопки согласно дизайн-системе Платформы Multi-D	enum	Primary	Primary - Используется для кнопки, выполняющей основное, ожидаемое, наиболее вероятное действие, например, Сохранить, Добавить, Применить. На странице или в окне приложения обычно используется единожды. Secondary - Используется при наличии нескольких равновероятных или равнозначных действий. На странице или в окне приложенияи может использоваться более одного раза. PrimaryGray - Используется для кнопки, выполняющей основное, ожидаемое, наиболее вероятное действие, например, Сохранить, Добавить, Применить. На странице или в окне приложения обычно используется единожды. Tertiary - Используется для кнопки, выполняющей дополнительное, менее приоритетное действие, чем действие, выполняемое по кнопке со стилем Primary, например, Отменить. PrimaryError - Используется для кнопки, выполняющей наиболее ожидаемое, приоритетное деструктивное действие на странице или в окне приложения, например, Удалить. SecondaryError - Используется при наличии нескольких равновероятных или равнозначных деструктивных действий. На странице или в окне приложения может использоваться более одного раза. TertiaryError - Используется для кнопки, выполняющей деструктивное действие. Может использоваться вместо стиля Secondary Red. SecondaryGray - Используется по умолчанию при наличии нескольких действий с равным приоритетом, например, для кнопок на панели инструментов. TertiaryGray - Используется вместо стиля Secondary Gray, например, для кнопки рядом с кнопкой в стиле Primary — Отменить.
Text	Надпись на кнопке	string
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Visible	Признак инверсии состояния компонента Скрыт	boolean	True

Примеры

JSX:

<Group Mode="Column" Height="150px">
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Text Value="Text" Mode="Medium_14" CSS={['ml-8']} />
      <Button
        CSS={['m-8']} 
        Text="Сохранить" 
        Style="Primary"
      />
    </Group>
    
    <Group Mode="Column" Height="auto" Width="33%">
      <Text Value="Text+Icon" CSS={['ml-8']} />
      <Button
        Hint="best hint ever"
        CSS={['m-8']} 
        Text="Сохранить" 
        Style="Primary"
      >
        <Icon Value={{ name: 'check' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Text Value="Icon" CSS={['ml-8']} />
      <Button
        Tooltip="Кнопка сохранить…"
        CSS={['m-8']}  Style="Primary">
        <Icon Value={{ name: 'check' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="PrimaryError"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="PrimaryError"
      >
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        Hint={{  position: 'topRight', value: "Все говорят, что я Tooltip, но я идентифицирую себя, как Hint."  }}
        CSS={['m-8']}  Style="PrimaryError">
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="PrimaryGray"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="PrimaryGray"
      >
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        Hint={{  position: 'topRight', value: "Все говорят, что я Tooltip, но я идентифицирую себя, как Hint."  }}
        CSS={['m-8']}  Style="PrimaryGray">
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Отправить" 
        Style="Secondary"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Отправить" 
        Style="Secondary"
      >
        <Icon Value={{ name: 'email' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="Secondary">
        <Icon Value={{ name: 'email' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Принять" 
        Style="SecondaryError"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Принять" 
        Style="SecondaryError"
      >
        <Icon Value={{ name: 'check' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="SecondaryError">
        <Icon Value={{ name: 'check' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="SecondaryGray"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="SecondaryGray"
      >
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="SecondaryGray">
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Отправить" 
        Style="Tertiary"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Отправить" 
        Style="Tertiary"
      >
        <Icon Value={{ name: 'email' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="Tertiary">
        <Icon Value={{ name: 'email' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Принять" 
        Style="TertiaryError"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Принять" 
        Style="TertiaryError"
      >
        <Icon Value={{ name: 'check' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="TertiaryError">
        <Icon Value={{ name: 'check' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="TertiaryGray"
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Удалить" 
        Style="TertiaryGray"
      >
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="TertiaryGray">
        <Icon Value={{ name: 'delete_item' }} />
      </Button>
    </Group>
  </Group>
  <Group Mode="Row">
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Отправить" 
        Style="Primary"
        Disabled={true}
      />
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']} 
        Text="Отправить" 
        Style="Primary"
        Disabled={true}
      >
        <Icon Value={{ name: 'email' }} />
      </Button>
    </Group>
    <Group Mode="Column" Height="auto" Width="33%">
      <Button
        CSS={['m-8']}  Style="Primary" Disabled={true}>
        <Icon Value={{ name: 'email' }} />
      </Button>
    </Group>
  </Group>
</Group>