Skip to content

Button

My first name is Belly.

Example

Basic

Show Code
vue
<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
vue
<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
vue
<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
vue
<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
vue
<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
vue
<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
vue
<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>

Usage

Props

NameTypeDefault ValueDescription
blockbooleanfalse

Whether the button is displayed as block.

filledbooleanfalse

Whether the button is filled with its color.

graphicsOptionsimport('roughjs/bin/core').Options
htmlType
loadingbooleanfalse

Whether the button is loading. It will be non-interactive in loading state.

roundbooleanfalse

Whether the button is round.

size'small' | 'large' | (string & {})

Element size type. It's actually just a class name, so you can also pass in another value and declare custom styles for it.

tag'button' | 'a' | (string & {})'button'

HTML tag for rendering the button.

type'primary' | 'info' | 'success' | 'warning' | 'error' | 'comment' | (string & {})

Element style type. It's actually just a class name, so you can also pass in another value and declare custom styles for it.

See also Color Styles.

Slots

NameTypeDescription
default(props: {}) => any

Content of the button.

Styles

NameTypeDefault ValueDescription
--r-button-color<color>var(--r-element-color)

Color of the button text.

--r-button-border-color<color>var(--r-button-color)

Color of the button border.

--r-button-border-width<length>2px when focused or active, var(--r-common-stroke-width) else

Width of the button border.


--r-button-border-dash<length>+ | none8px when hovered, none else

List of comma and/or whitespace separated the lengths of alternating dashes and gaps of the element border.

An odd number of values will be repeated to yield an even number of values. Thus, 8 is equivalent to 8 8.

See stroke-dasharray.


Released under the ISC License.