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

<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

<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

<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

<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

<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

<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

<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>