@webitel/ui

Appearance

wt-rounded-action.vue ​

CAUTION

Увага, Застаріле! Як робитимете шось нове (або перероблятимете старе), то викиньте той wt-rounded-action, і заюзайте wt-button.

Specs ​

Props

Name Required Types Default Description Example Deprecated
icon ✅ string - Icon name (required)
iconPrefix string '' inserts icon name prefix between "icon" and actual icon name ("icon" prop).
Useful for library icons extension with project-level icons with this prefix in name
color string 'secondary' Button color
size string 'md' Controls button size
active boolean false Marks button as active
disabled boolean false Disables the button
rounded boolean false Makes button rounded
wide boolean false Stretches button to all available width
loading boolean false Shows loading state
tooltip string - Tooltip text displayed on hover via v-tooltip directive

Events

Name Params Description
click

Different colors ​

Code
js
<script setup></script>

<template>
  <div
    class="example-wrapper"
    style="display: flex; gap: var(--spacing-xs)"
  >
    <wt-rounded-action
      icon="call"
      color="primary"
    />
    <wt-rounded-action
      icon="call"
      color="secondary"
    />
    <wt-rounded-action
      icon="call"
      disabled
    />
    <wt-rounded-action
      icon="call"
      color="success"
    />
    <wt-rounded-action
      icon="call"
      color="error"
    />
    <wt-rounded-action
      icon="call"
      color="transfer"
    />
  </div>
</template>

<style scoped lang="scss"></style>

Active (pressed) buttons ​

Code
js
<script setup></script>

<template>
  <div
    class="example-wrapper"
    style="display: flex; gap: var(--spacing-xs)"
  >
    <wt-rounded-action
      active
      icon="call"
      color="primary"
    />
    <wt-rounded-action
      active
      icon="call"
      color="secondary"
    />
    <wt-rounded-action
      active
      icon="call"
      disabled
    />
    <wt-rounded-action
      active
      icon="call"
      color="success"
    />
    <wt-rounded-action
      active
      icon="call"
      color="error"
    />
    <wt-rounded-action
      active
      icon="call"
      color="transfer"
    />
  </div>
</template>

<style scoped lang="scss"></style>

Wide buttons ​

Code
js
<script setup></script>

<template>
  <div
    class="example-wrapper"
    style="display: flex; gap: var(--spacing-xs)"
  >
    <wt-rounded-action
      wide
      icon="call"
      color="secondary"
    />
    <wt-rounded-action
      wide
      rounded
      icon="call"
      color="secondary"
    />
  </div>
</template>

<style scoped lang="scss"></style>

Rounded buttons ​

Code
js
<script setup></script>

<template>
  <div
    class="example-wrapper"
    style="display: flex; gap: var(--spacing-xs)"
  >
    <wt-rounded-action
      rounded
      icon="call"
      color="primary"
    />
    <wt-rounded-action
      rounded
      icon="call"
      color="secondary"
    />
    <wt-rounded-action
      rounded
      icon="call"
      disabled
    />
    <wt-rounded-action
      rounded
      icon="call"
      color="success"
    />
    <wt-rounded-action
      rounded
      icon="call"
      color="error"
    />
    <wt-rounded-action
      rounded
      icon="call"
      color="transfer"
    />
  </div>
</template>

<style scoped lang="scss"></style>

Small (sm) buttons ​

Code
js
<script setup></script>

<template>
  <div
    class="example-wrapper"
    style="display: flex; gap: var(--spacing-xs)"
  >
    <wt-rounded-action
      size="sm"
      icon="call"
      color="primary"
    />
    <wt-rounded-action
      size="sm"
      icon="call"
      color="secondary"
    />
    <wt-rounded-action
      size="sm"
      icon="call"
      disabled
    />
    <wt-rounded-action
      size="sm"
      icon="call"
      color="success"
    />
    <wt-rounded-action
      size="sm"
      icon="call"
      color="error"
    />
    <wt-rounded-action
      size="sm"
      icon="call"
      color="transfer"
    />
  </div>
</template>

<style scoped lang="scss"></style>

Loading-state buttons ​

Code
js
<script setup></script>

<template>
  <div
    class="example-wrapper"
    style="display: flex; gap: var(--spacing-xs)"
  >
    <wt-rounded-action
      size="sm"
      icon="call"
      color="primary"
      loading
    />
    <wt-rounded-action
      size="sm"
      icon="call"
      color="secondary"
      loading
    />
    <wt-rounded-action
      size="sm"
      icon="call"
      disabled
      loading
    />
    <wt-rounded-action
      size="sm"
      icon="call"
      color="success"
      loading
    />
    <wt-rounded-action
      size="sm"
      icon="call"
      color="error"
      loading
    />
    <wt-rounded-action
      size="sm"
      icon="call"
      color="transfer"
      loading
    />
  </div>
</template>

<style scoped lang="scss"></style>

Tooltip ​

Code
js
<script setup></script>

<template>
  <div
    class="example-wrapper"
    style="display: flex; gap: var(--spacing-xs)"
  >
    <wt-rounded-action
      icon="call"
      color="primary"
      tooltip="Accept call"
    />
    <wt-rounded-action
      icon="call-end"
      color="error"
      tooltip="Decline call"
    />
  </div>
</template>

<style scoped lang="scss"></style>