Button

The Button component is used to trigger events or navigate.

The <Button/> provides the same functionality as a native <button> element, enhanced with styling.

While a <button> element should be used whenever some action is performed, <a> elements should be wrapped by the Button component when the user will navigate to another view. The button width is based on the text it holds. While being as short as possible, the text should clearly describe a button's action.

import { Button } from '@miniml/alpha-components-react/button';

copied

<Button>
  I like to be clicked
</Button>

Variant

The Button component has two differently designed types to help the user distinguish between varying levels of importance based on the buttons function; these types are primary and secondary. By default, if no type property is set, the Button component will use primary.

Property	Type	Default	Required
type	"primary" \| "secondary"	primary	false

<>
  <Button>
    Primary button
  </Button>
  <Button variant="secondary">
    Secondary button
  </Button>
</>

Size

The Button component has three different sizes which can help illustrate various emphasis levels in your interface; these sizes are small, medium, and large. By default, if no size property is set, the Button component will use medium.

Property	Type	Default	Required
size	"small" \| "medium" \| "large"	medium	false

<>
  <Button size="small">
    Small button
  </Button>
  <Button size="medium">
    Medium button
  </Button>
  <Button size="large">
    Large button
  </Button>
</>

Disabled

The Button component can be set to disabled to emulate the native disabled state of the <button> element. This will prevent a user from interacting with the Button component until the property is removed or set to false.

Property	Type	Default	Required
disabled	boolean	false	false

<Button disabled>
  Disabled button
</Button>

Monochrome

The Button component has a monochrome property which will change its styling and remove any color theme that is globally available from the root.

Property	Type	Default	Required
monochrome	boolean	false	false

<>
  <Button monochrome>
    Monochrome button
  </Button>
  <Button
    monochrome
    variant="secondary"
  >
    Monochrome button
  </Button>
</>

Submit

The Button component has a submit property that allows it to interact with forms. If set to true, the native button type attribute will be set to "submit". If not used, it will be set to "button".

Property	Type	Default	Required
submit	boolean	false	false

<form action="/">
  <Button submit>
    I submit forms.
  </Button>
</form>

Event

The Button component has a onClick callback that can be used to capture when a user interacts with the element. The callback returns the synthetic <HTMLButtonElement> event value.

Property	Return	Required
onClick	MouseEventHandler<HTMLButtonElement>	false

<Button onClick={() => setCount(count + 1)}>
  clicked: 0
</Button>