xl vision
  • Component
  • React Hooks
  • Playground
  • Overview
  • Color
  • Getting Start
    • Installation
  • General
    • Icon
    • Button
  • Layout
    • Grid
  • Form
    • Input
    • InputNumber
    • Textarea
  • Navigation
    • Dropdown
    • Affix
    • BackTop
    • Anchor
  • Data Display
    • Tooltip
    • Popover
    • Avatar
  • Faceback
    • Popconfirm
    • Dialog
    • Message
    • Notication
  • Animation
    • Transition
    • TransitionGroup
    • CollapseTransition
    • Ripple
  • Styles
    • Theme
    • CssBaseline
  • Basic Component
    • BaseButton
    • Portal
    • Popper
    • Modal
    • ResizeObserver

Button

Buttons are used to trigger some actions.

Examples

Basic

Basic

Enable elevation

Enable elevation effect, only work on variant=contained.

Disabled ripple

Disabled ripple.

Disabled state

When the button is disabled, the ripple effect and shadow of variant=contained will not work.

Size

Set buttons of different sizes by size.

Loading

The loading state is used for scenarios that require a period of processing to continue operation

button
button
button
button
disabled
Link

By setting href to the button, the button can get the ability of the a tag.

Long

By setting long to the button, the button can occupy a whole row.

Properties

For other parameters, please refer to BaseButton

PropertyDescriptionTypeDefaultRequire
hrefClick the jump address, the button behavior is the same as the a tagstring-false
disabledDisable Statebooleanfalsefalse
colorSet button theme colordefault | primary | success | warning | errordefaultfalse
variantSet button typecontained | outlined | textcontainedfalse
longLong buttonbooleanfalsefalse
prefixIconPrefix iconReact.ReactElement-false
suffixIconSuffix iconReact.ReactElement-false
loadingSet the button as loading stateboolean-false
roundRound buttonboolean-false
disableElevationShadow effect is forbidden, only valid for variant=containedboolean-false
childrenChild node, can be empty when prefixIcon or suffixIcon is specifiedReact.ReactNode-false
sizeButton Sizemiddle | large | smallmiddlefalse
Examples
Basic
Enable elevation
Disabled ripple
Disabled state
Size
Loading
Link
Long
Properties
Copyright © 2020-2021 Rhys Xia