Buttons

Buttons communicate the action that will occur when the user touches them. Ant buttons trigger an ink reaction on press. They may display text, imagery, or both. Flat buttons and raised buttons are the most commonly used types.

To show this type of Buttons you will need this code in down here.

<Button variant="raised" className="jr-btn bg-white text-black">Default</Button>
<Button variant="raised" color="primary" className="jr-btn text-white">Primary</Button>
<Button variant="raised" color="secondary" className="jr-btn text-white">Secondary</Button>
<Button variant="raised" className="jr-btn bg-warning text-white">Warning</Button>
<Button variant="raised" className="jr-btn bg-info text-white">Info</Button>
<Button variant="raised" className="jr-btn bg-success text-white">Success</Button>
<Button variant="raised" className="jr-btn bg-danger text-white">Danger</Button>

    

Optional Ant Design Colors

<Button variant="raised" className="jr-btn bg-cyan text-white">Cyan</Button>
<Button variant="raised" className="jr-btn bg-teal text-white">Teal</Button>
<Button variant="raised" className="jr-btn bg-amber text-white">Amber</Button>
<Button variant="raised" className="jr-btn bg-orange text-white">Orange</Button>
<Button variant="raised" className="jr-btn bg-deep-orange text-white">Deep Orange</Button>

   

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
children *	node		The content of the button.
classes	object		Useful to extend the style applied to components.
color	enum: 'default' |  'inherit' |  'primary' |  'secondary'	'default'	The color of the component. It supports those theme colors that make sense for this component.
component	union: string |  func		The component used for the root node. Either a string to use a DOM element or a component. The default value is a button.
disabled	bool	false	If true, the button will be disabled.
disableFocusRipple	bool	false	If true, the keyboard focus ripple will be disabled. disableRipple must also be true.
disableRipple	bool		If true, the ripple effect will be disabled.
fullWidth	bool	false	If true, the button will take up the full width of its container.
href	string		The URL to link to when the button is clicked. If defined, an a element will be used as the root node.
mini	bool	false	If true, and variant is 'fab', will use mini floating action button styling.
size	enum: 'small' |  'medium' |  'large'	'medium'	The size of the button. small is equivalent to the dense button styling.
variant	enum: 'flat' |  'raised' |  'fab'	'flat'	The type of button.