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>
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 | ||
htmlType | |||
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, See |