Northwestern Libraries Design System

Button

A Button

Example usage

import { Button } from '@nulib/design-system';

<Button isPrimary onClick={() => console.log("clicked")}>Ima Button</Button>

Props

string

boolean

boolean

boolean

boolean

boolean

Button w/ Icon

A Button can wrap multiple elements. To use an icon, wrap your button text in a `span`

Example usage

import { Button, Icon } from '@nulib/design-system';

<Button>
    <Icon isSmall>
        <Icon.Add />
    </Icon>
    <span>Add Item</span>
</Button>

Footer

Northwestern Global Marketing footer

Example usage

import { Footer } from '@nulib/design-system';

<Footer />

// Custom background color
<Footer css={{ background: "pink" }}

Props

boolean

Icon

An Icon is a component that renders an SVG HTML element from a controlled set of Ionicon sourced icons.

Example usage

import { Icon } from '@nulib/design-system';

<Icon isMedium>
    <Icon.Title>Audio Work</Icon.Title>
    <Icon.Audio />
</Icon>

Props

boolean

boolean

boolean

<Icon.Add />

<Icon.Audio />

<Icon.Close />

<Icon.Image />

<Icon.Video />

Notification

A Notification

Example usage

import { Notification } from '@nulib/design-system';

<Notification isInfo>
    <p><strong>Hey you!</strong></p>
    <p>I want to tell you something</p>
</Notification>

Props

boolean

boolean

boolean

boolean

boolean

boolean

Placeholder

A Placeholder renders an element that extends to the bounds of its container. Children of placeholders can be textual, Icon components, or images, and are centered horizontally and vertically.

Oops There should be something here.

Example usage

import { Placeholder } from '@nulib/design-system';

<Placeholder>
    <Icon isLarge>
        <Icon.Title>Audio Work</Icon.Title>
        <Icon.Audio />
    </Icon>
</Placeholder>

<Placeholder>
    <strong>Oops</strong>
    There should be something here.
</Placeholder>

Popover

A popover is a component that couples a trigger with some content that displays in an attached pane. When wrapping a Button component with Popover.Trigger, the as prop should be used on Buttons.

Example usage

import { Popover, Button } from '@nulib/design-system';

<Popover>
    <Popover.Trigger>
        <Button isPrimary as="span">Trigger Text</Button>
    </Popover.Trigger>
    <Popover.Content isPrimary>
        <div style={{ height: "150px" }}>
            <Placeholder>
                <Icon isMedium>
                    <Icon.Image />
                </Icon>
            </Placeholder>
        </div>
        <p><strong>Primary</strong></p>
        <p>Nullam nec diam velit. Duis pulvinar, mi at...</p>
        <Button isLight isLowercase>
            Quisque hendrerit
        </Button>
    </Popover.Content>
</Popover>

Props

boolean

Popover w/ Text Trigger

Popover Triggers can also wrap around text. Though not required this text should indicate to the user that it is actionable in some way.

import { Popover } from '@nulib/design-system';

<Popover>
    <Popover.Trigger>
        <a href="#">Text Popover</a>
    </Popover.Trigger>
    <Popover.Content>
        <p>Fusce augue eros, convallis eget nunc...</p>
    </Popover.Content>
</Popover>

Tag

A Tag

Example usage

import { Tag } from '@nulib/design-system';

<Tag isSuccess>Published</Tag>

Props

boolean

boolean

boolean

boolean

boolean

Tag w/ Icon

A Tag can wrap multiple Icon components. To use an icon, as the prop isIcon.

import { Icon, Tag } from '@nulib/design-system';

<Tag isInfo isIcon>
  <Icon>
    <Icon.Video />
  </Icon>
  Video
</Tag>

boolean