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#

Prop	Description	Options / Example
`type`	The action on click of the button. If default, you can set a custom onClick function	`oneOf` 'clearSelections' 'back' 'forward' 'default'
`block`		`boolean`
`onClick`	Click handler	`function`
`size`	button size	`oneOf` 'tiny' 'small' 'medium' 'large' 'xlarge'
`color`	Background color	`string`
`margin`	margin, sets the margin css property	`string` '5px'
`width`	sets the width css property	`string` '100%'
`fontColor`	button font color	`string`
`borderRadius`	radius of the button	`string` '8px'
`border`	sets the border css property	`string`
`outline`	button outline	`string`
`activeTransform`	Transform css property on click	`string` null
`activeBackgroundColor`	Background color on click	`string` null
`activeBackgroundSize`	Background size on click	`string` null
`activeTransition`	Transition on click	`string` null
`transition`	transition	`string` null
`hoverBoxShadow`	box shadow on hover	`string` null
`hoverBorder`	border on hover	`string` null
`hoverBackground`	background color on hover	`string` 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'

button.hover.backgroundColor = 'yellow'

Setting	Description	Options / Example
button
`backgroundColor`	background color of the button	`string`
`fontColor`	button font color	`string`
`border`	button border	`string`
`margin`	button margin	`string`
`radius`	border radius	`string`
`shadow`	box shadow	`string`
`padding`	button paddding	`string`
`transform`	button transform property	`string`
`fontWeight`	font weight	`string`
`outline`	button outline	`string`
`transition`	transiton	`string`
hover	button.hover
`background`	background on hover	`string`
`borderColor`	border color on hover	`string`
`boxShadow`	box shadow on hover	`string`
`backgroundColor`	background color on hover	`string`
`border`	border on hover	`string`
active	button.active
`transform`	transform on button click	`string`
`backgroundColor`	background color on button click	`string`
`backgroundSize`	background size on button click	`string`
`transition`	transition on button click	`string`