Button

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

Button renders Falcon’s legacy button styles, including colors, sizing, gutters, icon layouts, and polymorphic rendering.

Primary

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <Button color="primary">Button</Button>
</div>

Colors

Code

<>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="primary">primary</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="secondary">secondary</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="special">special</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="success">success</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="warning">warning</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="danger">danger</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="marketing-blue">marketing-blue</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="marketing-green">marketing-green</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="gray">gray</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="dark-gray">dark-gray</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="jd-green">jd-green</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="corteva">corteva</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="rabo">rabo</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="farmop">farmop</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="goose">goose</Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color={false}>-</Button>
  </span>
</>

Size

Code

<>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="primary" size={24}>
      24
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="primary" size={32}>
      32
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="primary" size={36}>
      36
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="primary" size={44}>
      44
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="primary" fontSize={20} size={56}>
      56
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="primary" size={false}>
      -
    </Button>
  </span>
</>

Min Width

Code

<>
  <span style={{ display: "inline-block", margin: 20 }}>
    <h3>minWidth=&quot;min-width&quot;</h3>
    <br />
    <Button color="primary" minWidth="min-width">
      _
    </Button>
    <br />
    <br />
    <Button color="primary" minWidth="min-width">
      Long text example
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <h3>minWidth=&quot;min-width-large&quot;</h3>
    <br />
    <Button color="primary" minWidth="min-width-large">
      _
    </Button>
    <br />
    <br />
    <Button color="primary" minWidth="min-width-large">
      Long text example
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <h3>minWidth=&quot;false&quot;</h3>
    <br />
    <Button color="primary" minWidth={false}>
      _
    </Button>
    <br />
    <br />
    <Button color="primary" minWidth={false}>
      Long text example
    </Button>
  </span>
</>

Disabled

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <Button color="primary" disabled>
    Button
  </Button>
</div>

Outline

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <Button color="primary" outline>
    Button
  </Button>
</div>

Border None

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <Button borderNone color="primary" outline>
    Button
  </Button>
</div>

Gutter

Code

<>
  <span style={{ display: "inline-block", margin: 20 }}>
    <h3>gutter=&quot;0&quot;</h3>
    <br />
    <Button color="primary" gutter={0} minWidth={false}>
      Button
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <h3>gutter=&quot;12&quot;</h3>
    <br />
    <Button color="primary" gutter={12} minWidth={false}>
      Button
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <h3>gutter=&quot;16&quot;</h3>
    <br />
    <Button color="primary" gutter={16} minWidth={false}>
      Button
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <h3>gutter=&quot;24&quot;</h3>
    <br />
    <Button color="primary" gutter={24} minWidth={false}>
      Button
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <h3>gutter=&quot;32&quot;</h3>
    <br />
    <Button color="primary" gutter={32} minWidth={false}>
      Button
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <h3>gutter=&quot;36&quot;</h3>
    <br />
    <Button color="primary" gutter={36} minWidth={false}>
      Button
    </Button>
  </span>
</>

Button Grid

ButtonContainer and ButtonCell compose a button’s inner layout when it contains both an icon and text. Use className="hidden-xxs" on the label cell to hide it at the smallest breakpoint, producing an icon-only button on mobile.

Code

<>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="primary">
      <ButtonContainer>
        <ButtonCell>
          <Icon name="tank" size="24" />
        </ButtonCell>
        <ButtonCell className="hidden-xxs">Prepend icon</ButtonCell>
      </ButtonContainer>
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="primary">
      <ButtonContainer>
        <ButtonCell className="hidden-xxs">Append icon</ButtonCell>
        <ButtonCell>
          <Icon name="tank" size="24" />
        </ButtonCell>
      </ButtonContainer>
    </Button>
  </span>
  <span style={{ display: "inline-block", margin: 20 }}>
    <Button color="primary">
      <ButtonContainer>
        <ButtonCell className="hidden-xxs">Append icon</ButtonCell>
        <ButtonCell>
          <Icon name="tank" size="24" />
        </ButtonCell>
        <ButtonCell className="hidden-xxs">Prepend icon</ButtonCell>
      </ButtonContainer>
    </Button>
  </span>
</>

Icon Button

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <Button color="primary" iconButton>
    <Icon name="tank" size="24" />
  </Button>
</div>

Customize Rendered Element

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <Button
    as="a"
    color="primary"
    href="https://example.com"
    rel="noopener noreferrer"
    target="_blank"
  >
    Open Example site in a new tab
  </Button>
</div>

API

Button

Name	Type/Description
as	ElementType<any, keyof IntrinsicElements> | undefined
borderNone	boolean | undefined
color	false | "secondary" | "success" | "warning" | "danger" | "primary" | "special" | "marketing-blue" | "marketing-green" | "gray" | "dark-gray" | "jd-green" | "corteva" | "rabo" | "farmop" | "goose" | undefined
fontSize	number | undefined
fontSizeBreakpoints	Partial<Record<Breakpoint, number>> | undefined
fullWidth	boolean | undefined
fullWidthXs	boolean | undefined
gradient	boolean | undefined
gutter	ButtonGutter | undefined
gutterBreakpoints	Partial<Record<Breakpoint, 0 | 12 | 16 | 24 | 32 | 36>> | undefined
iconButton	boolean | undefined
minWidth	false | "min-width" | "min-width-large" | undefined
outline	boolean | undefined
size	ButtonSize | undefined
sizeBreakpoints	Partial<Record<Breakpoint, false | 24 | 32 | 36 | 44 | 56>> | undefined

ButtonCell

Name	Type/Description
className	string | undefined

ButtonContainer

Name	Type/Description
className	string | undefined