Core props | Foundations

SWAN provides a set of core props that can be used on any component.

Many of them indicate that they have Responsive support—this means you can provide different values for different screen sizes. For more information, see Responsive System.

Space props

The Space system lets you add margin or padding to your page layout as needed. These props all have Responsive support.

For more information, see Space.

Text props

To apply text styling on any component it strongly recommended to use the fontSkin prop. This props adds all styling required to match the semantically grouped font styles.

If that doesn't suit you can then use other typography props to change things individually like font size, weight, family, color, capitalization, and alignment.

All of these props except fontSkin, fontSize and fontFamily have Responsive support. The fontSkin and fontSize props inherently adjust based on the screen size.

For more information, see Typography.

<SwanComponent
  fontSize="x1"
  // other than fontSize, you can handle these props responsively
  textAlign={{ xs: 'left', sm: 'right' }}
  textColor={{ sm: 'alert', lg: 'black' }}
  fontWeight={{ xs: 'normal', md: 'bold' }}
  textAllCaps={{ sm: true, lg: false }}
/>

<SwanComponent
  fontSize="x1"
  // other than fontSize, you can handle these props responsively
  textAlign={{ xs: 'left', sm: 'right' }}
  textColor={{ sm: 'alert', lg: 'black' }}
  fontWeight={{ xs: 'normal', md: 'bold' }}
  textAllCaps={{ sm: true, lg: false }}
/>

backgroundColor

You can add a background color to a SWAN element using the backgroundColor prop (or the bgc prop, if you prefer brevity), using a value that’s one of the color choices in the SWAN palette. This prop has Responsive support.

For more information, see Color.

Modes

You can change the appearance of UI via modes. Modes can be activated through their respective core prop, e.g. darkMode. Different modes can be used together as needed, e.g. darkMode and compactMode. Modes can also be nested. To reset to the default token values, standardMode can be applied to overwrite all other modes.

For more information, See Modes.

Render props

You can change which HTML element a SWAN React component renders. For instance, maybe you want an Icon to be a <button> tag, or want your tile to be an <a> tag.

() => {
  return (
    <Accordion fullBleed>
      <BasicCollapsible collapsibleId="as" heading="as / component">
        <Card bordered as="a" href="#url">
          Card as an &lt;a&gt; tag.
        </Card>
        <P>
          <strong>Acceptable values:</strong> Any valid HTMLElement
        </P>
        <P>
          We also provide <code>component</code> as an alias for <code>as</code>
          .
        </P>
      </BasicCollapsible>
      <BasicCollapsible collapsibleId="render" heading="render">
        <TextInputWithButtonInset>
          <TextInput placeholder="Search..." type="search" />
          <Icon
            render={props => (
              <Button tabIndex={-1}>
                <img {...props} />
              </Button>
            )}
            iconType="search"
          />
        </TextInputWithButtonInset>
        <P>
          <strong>Acceptable values:</strong> A function that accepts props
          object and returns a ReactNode
        </P>
      </BasicCollapsible>
    </Accordion>
  )
}

() => {
  return (
    <Accordion fullBleed>
      <BasicCollapsible collapsibleId="as" heading="as / component">
        <Card bordered as="a" href="#url">
          Card as an &lt;a&gt; tag.
        </Card>
        <P>
          <strong>Acceptable values:</strong> Any valid HTMLElement
        </P>
        <P>
          We also provide <code>component</code> as an alias for <code>as</code>
          .
        </P>
      </BasicCollapsible>
      <BasicCollapsible collapsibleId="render" heading="render">
        <TextInputWithButtonInset>
          <TextInput placeholder="Search..." type="search" />
          <Icon
            render={props => (
              <Button tabIndex={-1}>
                <img {...props} />
              </Button>
            )}
            iconType="search"
          />
        </TextInputWithButtonInset>
        <P>
          <strong>Acceptable values:</strong> A function that accepts props
          object and returns a ReactNode
        </P>
      </BasicCollapsible>
    </Accordion>
  )
}

<>
  // using `as` prop
  <Card as="a" href="#">
    Some text
  </Card>
  // using `render` prop
  <TextInputWithButtonInset>
    <TextInput placeholder="Search..." type="search" />
    <Icon
      render={props => (
        <Button tabIndex={-1}>
          <img {...props} />
        </Button>
      )}
      iconType="search"
    />
  </TextInputWithButtonInset>
</>

<>
  // using `as` prop
  <Card as="a" href="#">
    Some text
  </Card>
  // using `render` prop
  <TextInputWithButtonInset>
    <TextInput placeholder="Search..." type="search" />
    <Icon
      render={props => (
        <Button tabIndex={-1}>
          <img {...props} />
        </Button>
      )}
      iconType="search"
    />
  </TextInputWithButtonInset>
</>

display

The display prop sets the CSS display property, specifying the display behavior (the type of rendering box) of an element.

The prop also supports the Responsive system.

Acceptable values: any value in SWAN’s TypeScript type StyleDisplay, which covers most of the possible CSS values for display.

overflow

The overflow prop sets the CSS overflow property. This prop has Responsive support.

Acceptable values: any value in SWAN’s TypeScript type StyleOverflow, which covers the possible CSS values for overflow.

visuallyHidden

The visuallyHidden prop is used for accessibility support, making content hidden from screens but still available to users on assistive technologies such as screen readers.

It is useful for adding additional explanatory text that sighted users might not need, but which will make the UI better understood by users on assistive technologies. This prop has Responsive support.

Acceptable values: boolean

swanStyle

You can group together any of the above props (p, m, bgc, visuallyHidden, etc) into a single prop called swanStyle. This prop has Responsive support.

<Box bgc="black">
  <Card
    swanStyle={{
      m: { xs: 4, md: 5, lg: 7 },
      p: { xs: 4, sm: 7 },
      display: 'inline-block',
      bgc: 'green-100',
      textAllCaps: true,
      textAlign: 'right',
      textColor: 'dark-grey',
      fontSize: 4,
    }}
  >
    Some content in card
  </Card>
</Box>

<Box bgc="black">
  <Card
    swanStyle={{
      m: { xs: 4, md: 5, lg: 7 },
      p: { xs: 4, sm: 7 },
      display: 'inline-block',
      bgc: 'green-100',
      textAllCaps: true,
      textAlign: 'right',
      textColor: 'dark-grey',
      fontSize: 4,
    }}
  >
    Some content in card
  </Card>
</Box>

loadingShimmer

The loadingShimmer is for sections of pages that are currently loading, such as skeleton screens. Typically a section with this prop will not have any content inside of it.

<Card loadingShimmer>Loading Shimmer</Card>

<Card loadingShimmer>Loading Shimmer</Card>