Bridge: Hack4Impact UIUC Design System

Button is used to trigger an action.

In Bridge, we have 3 types of buttons.

Primary: filled in button
Secondary: outline button
Tertiary: link button (use <Link as="button"/>)

For special cases, if you want to use href, you may do <Button as="a" href="#"/>. This will make the Button an anchor tag.

For information on Button style and usage guidelines, check out Button Design Guidelines.

Color Variants

  
<Button>Button</Button>

<Button variant="primary">Button</Button>
<Button variant="secondary">Button</Button>
<Button variant="success">Button</Button>
<Button variant="error">Button</Button>
<Button variant="warning">Button</Button>
<Button variant="white">Button</Button><Button>Button</Button>
<Button variant="primary">Button</Button>
<Button variant="secondary">Button</Button>
<Button variant="success">Button</Button>
<Button variant="error">Button</Button>
<Button variant="warning">Button</Button>
<Button variant="white">Button</Button>

Sizing

There are three sizes of buttons: large, medium, small. Default is medium.

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

Button Groups

When using multiple buttons side by side, you can use <Button.Group>. This will add the correct 20px margin between buttons. ButtonBox has same props as Box

 
 
<Button.Group>
    <Button variant="primary">Button #1</Button>
    <Button variant="success">Button #2</Button>
    <Button variant="error">Button #3</Button>
</Button.Group><Button.Group>
    <Button variant="primary">Button #1</Button>
    <Button variant="success">Button #2</Button>
    <Button variant="error">Button #3</Button>
</Button.Group>

Common Props

Button includes COMMON props. Read Common Props for details and API. These common props will override component props such as the color.

Component Props

Note: ButtonBox has same props as Box

Prop name	Type	Default	Description
as	String	`button`	sets the HTML tag for the component
variant	String	'primary'	color variant (`primary` \| `secondary` \| `success` \| `error` \| `warning` \| `white`)
disabled	Boolean	false	disable button
outline	Boolean	false	outline button - secondary button
onClick	Func	null	prop function to handle onClick
className	String	''	classNames to override styling for button
type	String	'medium'	size of button (`large` \| `medium` \| `small`)
theme	Object	Bridge Theme	use to override default bridge theme

Buttons

Color Variants

Sizing

Button Groups

Common Props

Component Props