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	boolean	false	Whether the button is displayed as block.
filled	boolean	false	Whether the button is filled with its color.
graphicsOptions	import('roughjs/bin/core').Options		Options for Rough.js. See Graphics Configuration.
htmlType			The type attribute of HTMLButtonElement.
loading	boolean	false	Whether the button is loading. It will be non-interactive in loading state.
round	boolean	false	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

Name	Type	Description
default	(props: {}) => any	Content of the button.

Styles

Name	Type	Default Value	Description
--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>+ | none	8px 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.