Button

Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both.

Examples

Basic Usage

<Mdx-button>Default</Mdx-button>
<Mdx-button disabled="true">Default</Mdx-button>

Expand

This property lets you specify how wide the button should be. By default, buttons have display: inline-block, but setting this property will change the button to a full-width element with display: block.

<Mdx-button expand="block">Block</Mdx-button>
<Mdx-button expand="full">Full</Mdx-button>

Fill

This property determines the background and border color of the button.

<Mdx-button>Default</Mdx-button>
<Mdx-button fill="clear">Clear</Mdx-button>
<Mdx-button fill="outline">Outline</Mdx-button>
<Mdx-button fill="solid">Solid</Mdx-button>

Size

This property specifies the size of the button. Setting this property will change the height and padding of a button.

<Mdx-button size="small">Small</Mdx-button>
<Mdx-button size="default">Default</Mdx-button>

Icons

<Mdx-button icon="icon">Icon</Mdx-button>

Colors

<Mdx-button>Default</Mdx-button>
<Mdx-button color="primary">Primary</Mdx-button>
<Mdx-button color="secondary">Secondary</Mdx-button>
<Mdx-button color="tertiary">Tertiary</Mdx-button>
<Mdx-button color="success">Success</Mdx-button>
<Mdx-button color="warning">Warning</Mdx-button>
<Mdx-button color="danger">Danger</Mdx-button>
<Mdx-button color="light">Light</Mdx-button>
<Mdx-button color="medium">Medium</Mdx-button>
<Mdx-button color="dark">Dark</Mdx-button>

Properties

color

Description	The color to use from your application's color palette (ionic variables)
Type	"primary" | "secondary" | "tertiary" | "dange" | "warning" | "success" | "light" | "medium" | "dark" |
Required	primary

fill

Description	Set to "outline" for a transparent button with a border, or to "solid" for a button with a filled background. The default fill is "solid"
Type	"solid" | "outline"
Default	solid

size

Description	Change the size of the button
Type	"default" | "small
Default	default

expand

Description	Set to "block" for a full-width button or to "full" for a full-width button with square corners and no left or right borders
Type	"block" | "full" | undefined
Default	undefined

disabled

Description	If true, the user cannot interact with the button`
Type	Boolean
Default	false

loading

Description	If true, the loading indicator will show and user cannot interact with the button`
Type	String
Default	key

icon

Description	Allows you to send icon as prop to the button
Type	"String" | "null"
Default	null