Button

My first name is Belly.

Example

Basic

Show Code

<script lang="ts" setup>
import { RButton, RSpace } from 'roughness'
</script>

<template>
  <RSpace>
    <RButton>Normal</RButton>
    <RButton type="primary">Primary</RButton>
    <RButton type="info">Info</RButton>
    <RButton type="success">Success</RButton>
    <RButton type="warning">Warning</RButton>
    <RButton type="error">Error</RButton>
    <RButton type="comment">Comment</RButton>
  </RSpace>
</template>

Size

Show Code

<script lang="ts" setup>
import { RButton, RSpace } from 'roughness'
</script>

<template>
  <RSpace align="center">
    <RButton size="small">Small</RButton>
    <RButton>Medium</RButton>
    <RButton size="large">Large</RButton>
  </RSpace>
</template>

Filled

Show Code

<script lang="ts" setup>
import { RButton, RSpace } from 'roughness'
</script>

<template>
  <RSpace>
    <RButton filled>Normal</RButton>
    <RButton type="primary" filled>Primary</RButton>
    <RButton type="info" filled>Info</RButton>
    <RButton type="success" filled>Success</RButton>
    <RButton type="warning" filled>Warning</RButton>
    <RButton type="error" filled>Error</RButton>
    <RButton type="comment" filled>Comment</RButton>
  </RSpace>
</template>

See also GraphicsConfig.

Round

Show Code

<script lang="ts" setup>
import { RButton, RSpace } from 'roughness'
</script>

<template>
  <RSpace>
    <RButton round>Enter the Pipe</RButton>
    <RButton type="error" filled round>Eat the Mushroom</RButton>
  </RSpace>
</template>

State

Show Code

<script lang="ts" setup>
import { RButton, RSpace } from 'roughness'
</script>

<template>
  <RSpace>
    <RButton disabled>Train AlphaGo</RButton>
    <RButton type="primary" filled disabled>Let there be light</RButton>
    <RButton type="warning" loading>Give up domination</RButton>
  </RSpace>
</template>

Block

Show Code

<script lang="ts" setup>
import { RButton, RSpace } from 'roughness'
</script>

<template>
  <RSpace vertical>
    <RButton block>Switch Account</RButton>
    <RButton type="error" block>Log out of Chaos</RButton>
  </RSpace>
</template>

Tag

Show Code

<script lang="ts" setup>
import { RButton, RSpace } from 'roughness'
</script>

<template>
  <RSpace>
    <RButton tag="a" type="primary" filled>Remote Bomb</RButton>
    <RButton tag="a" type="error">Magnesis</RButton>
  </RSpace>
</template>

Remote BombMagnesis

Usage

Props

Name	Type	Default Value	Description
block
filled
graphicsOptions
htmlType
loading
round
size
tag
type

Slots

Name	Type	Description
default

Styles

Name	Type	Default Value	Description
--r-button-color
--r-button-border-color
--r-button-border-width
--r-button-border-dash