Refactory UI Kit

Button

Button Type

Some types of buttons:

Primary Secondary Success Danger Warning Info Light Dark Link
  <RfButton type="primary">Primary</RfButton>
  <RfButton type="secondary">Secondary</RfButton>
  <RfButton type="success">Success</RfButton>
  <RfButton type="danger">Danger</RfButton>
  <RfButton type="warning">Warning</RfButton>
  <RfButton type="info">Info</RfButton>
  <RfButton type="light">Light</RfButton>
  <RfButton type="dark">Dark</RfButton>
  <RfButton type="link">Link</RfButton>

Outlined Buttons

Some type of outlined buttons:

Primary Secondary Success Danger Warning Info Light Dark Link
  <RfButton type="primary" outline>Primary</RfButton>
  <RfButton type="secondary" outline>Secondary</RfButton>
  <RfButton type="success" outline>Success</RfButton>
  <RfButton type="danger" outline>Danger</RfButton>
  <RfButton type="warning" outline>Warning</RfButton>
  <RfButton type="info" outline>Info</RfButton>
  <RfButton type="light" outline>Light</RfButton>
  <RfButton type="dark" outline>Dark</RfButton>
  <RfButton type="link" outline>Link</RfButton>

Size

Fancy larger or smaller buttons

Primary Secondary
  <RfButton type="primary" size="lg">Primary</RfButton>
  <RfButton type="secondary" size="lg">Secondary</RfButton>
Primary Secondary
  <RfButton type="primary" size="sm">Primary</RfButton>
  <RfButton type="secondary" size="sm">Secondary</RfButton>

Blocked Buttons

Primary Secondary
  <RfButton type="primary" size="lg" block>Primary</RfButton>
  <RfButton type="secondary" size="lg" block>Secondary</RfButton>

Active/Disabled State

Active Button

Primary Secondary
  <RfButton type="primary" size="lg">Primary</RfButton>
  <RfButton type="secondary" size="lg">Secondary</RfButton>

Disabled Button

Primary Secondary
  <RfButton type="primary" size="lg" disabled>Primary</RfButton>
  <RfButton type="secondary" size="lg" disabled>Secondary</RfButton>

←