Button

The Button component is a fundamental interactive component used to trigger actions. Onionl UI provides buttons in various sizes and types to meet different scenario needs.

Basic Usage

Button styles can be defined through the size and type properties.

Size

Buttons come in 7 preset sizes: xs, sm, md, lg, xl, 2xl, 3xl. The default size is md.

在 github 中打开

展开代码

复制代码

<template>
  <div class="space-x-2">
    <ol-button size="3xl">
      3xl
    </ol-button>
    <ol-button size="2xl">
      2xl
    </ol-button>
    <ol-button size="xl">
      xl
    </ol-button>
    <ol-button size="lg">
      lg
    </ol-button>
    <ol-button size="md">
      md
    </ol-button>
    <ol-button size="sm">
      sm
    </ol-button>
    <ol-button size="xs">
      xs
    </ol-button>
  </div>
</template>

Type

There are three types of buttons: primary, secondary, and outline. The default type is primary.

在 github 中打开

展开代码

复制代码

<template>
  <div class="space-x-2">
    <ol-button type="primary">
      Primary
    </ol-button>
    <ol-button type="secondary">
      Secondary
    </ol-button>
    <ol-button type="outline">
      Outline
    </ol-button>
  </div>
</template>

Link Button

Buttons can be used as links. Use the to attribute to specify the link address, or use the link attribute to style the button as a link.

Router-Link

在 github 中打开

展开代码

复制代码

<template>
  <div class="space-x-2">
    <ol-button class="!color-primary !no-underline !hover:underline" to="/">
      Router-Link
    </ol-button>
    <ol-button link>
      Link
    </ol-button>
  </div>
</template>

Disabled State

Buttons can be set to a disabled state using the disabled attribute.

在 github 中打开

展开代码

复制代码

<template>
  <ol-button disabled>
    Disabled
  </ol-button>
</template>

Icon Button

Buttons can contain only icons. Use the icon attribute to set an icon, supporting all Material Icons.

TIP

To use icons, you need to install the Mono Icons icon set first

在 github 中打开

展开代码

复制代码

<template>
  <div class="space-x-2 flex items-center">
    <ol-button icon="i-mi-comment" />
    <ol-button icon="i-mi-add">
      Plus
    </ol-button>
    <ol-button icon="i-mi-settings" link />
  </div>
</template>

Attributes

Attribute	Description	Type	Default
size	Button size, can be sm, md, lg or a number	string | number	md
link	Whether to use link style	boolean	false
to	Route target, supports vue-router's to attribute	string | RouteLocationRaw	-
icon	Icon name, supports Material Icons	string	-
disabled	Whether the button is disabled	boolean	false