ZuzJS UI

ZuzJS

UI

v1.0.71

⌃K

Concepts

Overview

Composition

Layout

Accordion

Alert

Auto Complete

Avatar

Badge

Box

Button

Calendar

Chart

ChatBubble

ChatList

Checkbox

ColorScheme

ContextMenu

CookiesConsent

Cover

Cropper

Crumb

DatePicker

Dialog

Drawer

Fab

Filters

Form

Group

Icon

Image

Input

KeyboardKeys

Label

List

NetworkStatus

Overlay

Pagination

Password

PinInput

ProgressBar

Radio

ScrollView

Slider

Search

SelectTabs

Select

Sheet

Slider

Span

Spinner

Switch

Table

TabView

Text

TextArea

TextWheel

Toast

Tooltip

Treeview

On this page

  • Overview
  • Basic Anatomy

Button

Used to trigger an action or event

1 import { Button } from "@zuzjs/ui"
2
3 export const ButtonBasic = () => {
4 return <Button>Button</Button>
5 }

Usage

import { Button } from "@zuzjs/ui"
<Button>Create Account</Button>

Props

Prop
Type
Required
Description
icon
string | null
No
Icon name shown before button text
iconSize
Variant
No
Size variant applied to icon
withLabel
boolean
No
Wraps children in
spinner
SPINNER
No
Spinner type used when state is
state
ButtonState
No
Button state:
variant
Variant
No
Visual size/style variant
reset
boolean
No
Disables default center-justified button layout
tooltip
string
No
Tooltip text; wraps button in
tooltipProps
Omit<ToolTipProps, "title">
No
Extra tooltip props except
kind
"solid" | "subtle" | "surface" | "outline" | "ghost" | "plain"
No
Visual button kind
disabled
boolean
No
Disables interaction
children
ReactNode
No
Button content
...ZuzProps
Props<"button">
No
Shared base props and native button attributes

Examples

Variants

Use the variant prop to change the size of the button.

import { Box, Button } from "@zuzjs/ui"
const Demo = () => {
return <Box as={`flex aic gap:10`}>
<Button variant="xl">Button (xl)</Button>
<Button variant="lg">Button (lg)</Button>
<Button variant="md">Button (md)</Button>
<Button variant="sm">Button (sm)</Button>
<Button variant="xs">Button (xs)</Button>
</Box>
}