Button

To trigger an operation.


Button

Name

Description

Type

Default

children

The content of the component

ReactNode

-

className

Forwarded to root element

string

-

color

The color of the component. It supports 4 colors

primary secondary neutral danger

primary

component

lets you change the root element

HTML elements

button

disabled

If true, the component is disabled

boolean

false

floating

If true, the button will have floating styles

boolean

false

fullWidth

If true, the button will take up the full width of its container

boolean

false

href

The URL to link to when the button with prop component='a' is clicked

string

-

leftIcon

Adds icon before component content

ReactNode

-

loading

If true, the button will perform the loading state

boolean

false

rightIcon

Adds icon after component content

ReactNode

-

size

The size of the component

sm md lg xl 2xl responsive

lg

style

Forwarded to root element

object

-

type

Set the original html type of button, see: MDN

button submit reset

button

variant

The variant to use

fill ghost outline

fill

  • All other props will be forwarded to root element

logo

© 2026 Magenta Design System • v2.0.0-alpha.4