Overview

Normally <Button> components will render a HTML <button> element. However, adding a href prop will automatically render an <a> element. React Bootstrap will take care of the proper ARIA roles for you.

Button Types

Modify the variant prop to style the button.

Solid Buttons

Solid buttons should only be used with the Primary, Secondary, and Tertiary theme colors.

Outline Buttons

Outline buttons should only be used with the Primary, and Dark theme colors.

Text Buttons

Text buttons should only be used with the Primary theme color.

Icon Buttons

Modus has built in support for both icon only buttons and buttons with both icons and text.

Text and Icons

Icons can be used within buttons by giving the icon a class of .modus-icon in addition to a class of either .left-icon or .right-icon, depending on the desired position.

Icon Only Buttons

When using Icon Only Buttons, DO NOT add any additional text inside the button. Give the variant icon-only and give the icon a class of .modus-icon. icon-only buttons can be used with the Primary or Dark theme color.

Button Sizes

Buttons default to “medium” size but there are also large and small options available.

Small Buttons

Large Buttons

Full-width (Block) Buttons

Create block level buttons—those that span the full width of a parent—by adding block.

Special Use Cases

Danger Button

A danger button should be used for permanent, destructive actions like delete.

API

Button

import Button from `@trimbleinc/modus-react-bootstrap/Button`
NameTypeDefaultDescription
active
boolean
false

Manually set the visual state of the button to :active

as
elementType
block
boolean

Spans the full width of the Button parent

disabled
boolean
false

Disables the Button, preventing mouse events, even if the underlying component is an <a> element

href
string

Providing a href will render an <a> element, styled as a button.

size
'sm' | 'lg'

Specifies a large or small button.

target
any
type
'button' | 'reset' | 'submit' | null
'button'

Defines HTML button type attribute.

variant
string
'primary'

One or more button variant combinations

buttons may be one of a variety of visual variants such as:

'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'link'

as well as "outline" versions (prefixed by 'outline-*')

'outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-dark', 'outline-light'

bsPrefix
string
'btn'

ToggleButtonGroup

import ToggleButtonGroup from `@trimbleinc/modus-react-bootstrap/ToggleButtonGroup`
NameTypeDefaultDescription
name
string

An HTML <input> name for each child button.

Required if type is set to 'radio'

onChange
function
controls value

Callback fired when a button is pressed, depending on whether the type is 'radio' or 'checkbox', onChange will be called with the value or array of active values

size
'sm' | 'lg'

Sets the size for all Buttons in the group.

type
'checkbox' | 'radio'
'radio'

The input type of the rendered buttons, determines the toggle behavior of the buttons

value
any
controlled by: onChange, initial prop: defaultValue

The value, or array of values, of the active (pressed) buttons

vertical
boolean
false

Make the set of Buttons appear vertically stacked.

ToggleButton

import ToggleButton from `@trimbleinc/modus-react-bootstrap/ToggleButton`
NameTypeDefaultDescription
checked
boolean

The checked state of the input, managed by <ToggleButtonGroup> automatically

disabled
boolean

The disabled state of both the label and input

inputRef
ReactRef

A ref attached to the <input> element

name
string

The HTML input name, used to group like checkboxes or radio buttons together semantically

onChange
function

A callback fired when the underlying input element changes. This is passed directly to the <input> so shares the same signature as a native onChange event.

type
'checkbox' | 'radio'

The <input> element type

value required
string | arrayOf | number

The value of the input, should be unique amongst it's siblings when nested in a ToggleButtonGroup.