Button

A Button. Trigger various Qlik actions such as clearing selections, or attaching a custom event.

Usage

import { Button } from @motor-js/core
//...
<Button color='brand'>
Hello
</Button>

Props

PropDescriptionOptions / Example
typeThe action on click of the button. If default, you can set a custom onClick functiononeOf
'clearSelections'
'back'
'forward'
'default'
blockboolean
onClickClick handlerfunction
sizebutton sizeoneOf
'tiny'
'small'
'medium'
'large'
'xlarge'
colorBackground colorstring
marginmargin, sets the margin css propertystring
'5px'
widthsets the width css propertystring
'100%'
fontColorbutton font colorstring
borderRadiusradius of the buttonstring
'8px'
bordersets the border css propertystring
outlinebutton outlinestring
activeTransformTransform css property on clickstring
null
activeBackgroundColorBackground color on clickstring
null
activeBackgroundSizeBackground size on clickstring
null
activeTransitionTransition on clickstring
null
transitiontransitionstring
null
hoverBoxShadowbox shadow on hoverstring
null
hoverBorderborder on hoverstring
null
hoverBackgroundbackground color on hoverstring
null

Examples

Simple Button example

function ButtonTest() {
const msg = 'You clicked the button'
return (
<Motor config={config}>
<Button onClick={() => console.log(msg)}>Click Me.</Button>
</Motor>
);
}

Large Buttons, different colors

function ButtonTest() {
const size = 'large'
return (
<Motor config={config}>
<Button size={size} color='brand'>Brand</Button>
<Button size={size} color='var(--oc-red-6)'>Red</Button>
<Button size={size} color='var(--oc-orange-6)'>Orange</Button>
<Button size={size} color='var(--oc-yellow-6)'>Yellow</Button>
<Button size={size} color='var(--oc-green-6)'>Green</Button>
<Button size={size} color='var(--oc-teal-6)'>Teal</Button>
<Button size={size} color='var(--oc-blue-6)'>Blue</Button>
<Button size={size} color='var(--oc-violet-6)'>Violet</Button>
<Button size={size} color='var(--oc-pink-6)'>Pink</Button>
<Button size={size} color='var(--oc-gray-6)'>Gray</Button>
<Button size={size} color='black'>Black</Button>
</Motor>
);
}

Theme API

button

Settings in button are below:

e.g. button.backgroundColor = 'red'

or

button.hover.backgroundColor = 'yellow'

SettingDescriptionOptions / Example
button
backgroundColorbackground color of the buttonstring
fontColorbutton font colorstring
borderbutton border string
marginbutton marginstring
radiusborder radiusstring
shadowbox shadowstring
paddingbutton padddingstring
transformbutton transform propertystring
fontWeightfont weightstring
outlinebutton outlinestring
transitiontransitonstring
hoverbutton.hover
backgroundbackground on hoverstring
borderColorborder color on hoverstring
boxShadowbox shadow on hoverstring
backgroundColorbackground color on hoverstring
borderborder on hoverstring
activebutton.active
transformtransform on button clickstring
backgroundColorbackground color on button clickstring
backgroundSizebackground size on button clickstring
transitiontransition on button clickstring