Button

A clickable item that performs an action. Buttons are used to drive a user through a flow and, optionally, give them contextual information about the action they are about to take.

Polymorphic Component

By default, content is rendered inside a <button>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

Basic Buttons

The type of button to display can be set with the buttonType prop. Similarly, the size can be set with the size prop. A Button without any additional props will display as a medium-sized primary button.

import { Button } from '@curology/ui-components-web/react/Button';

<Button buttonType="primary(default)|secondary|text">Default</Button>

Brand Buttons

The default CTA button style.

Primary

import { Button, ButtonMeta } from '@curology/ui-components-web/react/Button';

<Button buttonType="primary" state="brand" size="{sm|md|lg}" disabled="{true|false}" iconStart={<PlaceholderIcon />}>
  CTA
  <ButtonMeta>Meta primary</ButtonMeta>
</Button>

Secondary

import { Button, ButtonMeta } from '@curology/ui-components-web/react/Button';

<Button buttonType="secondary" state="brand" size="{sm|md|lg}" disabled="{true|false}" iconStart={<PlaceholderIcon />}>
  CTA
  <ButtonMeta>Meta secondary</ButtonMeta>
</Button>

Text

import { Button, ButtonMeta } from '@curology/ui-components-web/react/Button';

<Button buttonType="text" state="brand" size="{sm|md|lg}" disabled="{true|false}" iconStart={<PlaceholderIcon />}>
  CTA
  <ButtonMeta>Meta text</ButtonMeta>
</Button>

Brand Dark

An alternate CTA for use when the lighter purple doesn't work.

Primary

import { Button, ButtonMeta } from '@curology/ui-components-web/react/Button';

<Button buttonType="primary" state="dark" size="{sm|md|lg}" disabled="{true|false}" iconStart={<PlaceholderIcon />}>
  CTA
  <ButtonMeta>Meta primary</ButtonMeta>
</Button>

Text

import { Button, ButtonMeta } from '@curology/ui-components-web/react/Button';

<Button buttonType="text" state="dark" size="{sm|md|lg}" disabled="{true|false}" iconStart={<PlaceholderIcon />}>
  CTA
  <ButtonMeta>Meta text</ButtonMeta>
</Button>

Critical

Uh oh. Something bad is about to happen.

Primary

import { Button, ButtonMeta } from '@curology/ui-components-web/react/Button';

<Button buttonType="primary" state="critical" size="{sm|md|lg}" disabled="{true|false}" iconStart={<PlaceholderIcon />}>
  CTA
  <ButtonMeta>Meta primary</ButtonMeta>
</Button>

Text

import { Button, ButtonMeta } from '@curology/ui-components-web/react/Button';

<Button buttonType="text" state="critical" size="{sm|md|lg}" disabled="{true|false}" iconStart={<PlaceholderIcon />}>
  CTA
  <ButtonMeta>Meta text</ButtonMeta>
</Button>

Success

Something is about to be completed.

Primary

import { Button, ButtonMeta } from '@curology/ui-components-web/react/Button';

<Button buttonType="primary" state="success" size="{sm|md|lg}" disabled="{true|false}" iconStart={<PlaceholderIcon />}>
  CTA
  <ButtonMeta>Meta primary</ButtonMeta>
</Button>

Text

import { Button, ButtonMeta } from '@curology/ui-components-web/react/Button';

<Button buttonType="text" state="success" size="{sm|md|lg}" disabled="{true|false}" iconStart={<PlaceholderIcon />}>
  CTA
  <ButtonMeta>Meta text</ButtonMeta>
</Button>

Props

ButtonProps

Name	Type	Default Value	Required	Description
All attributes of a <button />
buttonType	"text" | "primary" | "secondary"	'primary'	No	Which type of button should be rendered?
flush	false | true	false	No	Render a text button with no padding?
icon	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	An icon to display at the start of the button. Using an `IconName` string is deprecated.
iconEnd	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	An icon to display at the end of the button. Using an `IconName` string is deprecated.
iconStart	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	An icon to display at the start the button. Same as `icon`. Using an `IconName` string is deprecated.
loading	false | true	false	No	Display the loading state?
size	"md" | "lg" | "sm"	'md'	No	How large should the button be?
state	"dark" | "critical" | "success" | "brand"	'brand'	No	Which color should the button be?