Button

Create a button with icon or link capabilities.

Usage

Use the default slot to set the text of the Button.

<template>
  <s-button label="Submit" />
</template>

You can also use the label prop.

<template>
  <s-button label="Submit" color="black" />
</template>

Style

Use the color and variant props to change the visual style of the Button.

<template>
  <s-button color="red" variant="outline" label="Submit"/>
</template>

Size

Use the size prop to change the size of the Button.

<template>
  <s-button size="sm" label="Submit"/>
</template>

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: * *i-{collection_name}-{icon_name}**.

Use the leading and trailing props to set the icon position or the leading-icon and trailing-icon props to set a different icon for each position.

<template>
    <s-button icon="icon-[heroicons--pencil-square]" size="sm" color="primary" variant="solid" label="Button" :trailing="false" />
</template>

The label as prop or slot is optional so you can use the Button as an icon-only button.

<template>
  <s-button icon="icon-[heroicons--pencil-square]" size="sm" color="primary" square variant="solid" />
</template>

Disabled

Use the disabled prop to disable the Button.

<template>
  <s-button label="Button" disabled />
</template>

Loading

Use the loading prop to show a loading icon and disable the Button.

Use the loading-icon prop to set a different icon or change it globally in ui.button.default.loadingIcon. Defaults to icon-[heroicons--arrow-path-20-solid].

<template>
  <s-button label="Button" loading />
</template>

Block

Use the block prop to make the Button fill the width of its container.

<template>
  <s-button label="Button" block />
</template>

Link

Use the to prop to make the Button a link.

Button

<template>
  <s-button label="Button" to="https://minasyan.info" target="_blank" />
</template>

Padded

Use the padded prop to remove the padding of the Button.

<template>
  <s-button
      :padded="false"
      color="gray"
      variant="link"
      icon="icon-[heroicons--x-mark-20-solid]"
  />
</template>

Square

Use the square prop to force the Button to have the same padding horizontally and vertically.

<template>
  <s-button
      :padded="false"
      color="gray"
      variant="link"
      icon="icon-[heroicons--x-mark-20-solid]"
  />
</template>

Truncate

Use the truncate prop to truncate the label of the Button.

<template>
  <s-button truncate class="w-20" label="Button with a long text" />
</template>

Group

To stack buttons as a group, use the ButtonGroup component.

• To size all the buttons equally, pass the size prop
• To change the orientation of the buttons, set the orientation prop to vertical
• To adjust the rounded or the shadow around buttons, customize with ui.buttonGroup.rounded or ui.buttonGroup.shadow

<template>
  <s-button-group size="sm" orientation="horizontal">
    <s-button label="Action" color="white" />
    <s-button icon="icon-[heroicons--chevron-down-20-solid]" color="gray" />
  </s-button-group>
</template>

This can also work with an Input component for example:

<template>
  <s-button-group size="sm" orientation="horizontal">
    <s-input />
    <s-button icon="icon-[heroicons--clipboard-document]" color="gray" />
  </s-button-group>
</template>

Slots

leading

Use the #leading slot to set the content of the leading icon.

<template>
  <s-button label="Button" color="gray">
    <template #leading>
      <s-avatar
          src="https://avatars.githubusercontent.com/u/2556185?&v=4"
          size="3xs"
      />
    </template>
  </s-button>
</template>

trailing

Use the #trailing slot to set the content of the trailing icon.

<template>
  <s-button label="Button" color="gray">
    <template #trailing>
      <s-avatar
          src="https://avatars.githubusercontent.com/u/2556185?&v=4"
          size="3xs"
      />
    </template>
  </s-button>
</template>