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>