import ActionLink from 'yamui/dist/components/ActionLink';
An actionable element with icon and text which will either render a button with an onClick callback or a navigation link.
Notes for use
Add here any notes on how to use the component, or delete this section.
Examples
With onClick (button implementation):
With long text and onClick:
With href (link implementation):
With long text and href:
import AsideSection from 'yamui/dist/components/AsideSection';
A section component to be used primarily for sidebar modules
Examples
Basic usage:
With an action:
import Avatar from 'yamui/dist/components/Avatar';
An Avatar shows a thumbnail representation of both an individual or group.
Notes for use
Avatar takes care of setting the alt text for you when you pass the one required attribute, name.
Examples
Without image:
With image:
With image and badge:
With image and soft border:
Example colors:
import Block from 'yamui/dist/components/Block';
A Block is a layout component to build consistent padding and vertical spacing between
components. It allows you to push a chunk of UI up or down by individual pixels to keep text in
the 4px vertical rhythm. It's also the primary place you should set textSize in your UIs,
providing enumerated options for the supported font-size/line-height combinations.
Notes for use
You should generally use a Block component instead of a div for layouts. By using the component's padding and bottomSpacing props instead of writing your own CSS, you'll be able to maintain consistent component spacing. For example, YamUI may eventually support more advanced responsive features based on device type or screen width. YamUI could dynamically adjust its gutters, but any UI with its own layout CSS may not conform to new layouts.
Spacing
In general UI components should fill their parent container's width. They should also not set their own vertical spacing (outer margin) to make it easier to be rendered in any context. Layout components would generally manage spacing and gutters. You can make it a little easier to achieve consistent spacing if you try to use bottom spacing instead of top spacing whenever possible.
Examples
Without props:
With padding:
Block can also have separate vertical and horizontal padding. With horizontal padding:
With vertical padding:
With top gutter spacing:
With bottom gutter spacing:
With text alignment:
With ellipsis:
Text colors:
Text sizes:
With positive push:
With negative push below margin:
With negative push below padding:
With negative push below border:
import Box from 'yamui/dist/components/Box';
A Box is a div with a border and fixed padding. It also has display: relative so you can
absolutely-position elements like a close button. Boxes will primarily be used for card views.
Examples
Basic usage:
With onClick:
import Button from 'yamui/dist/components/Button';
A Button allows a user to take an action.
Notes for use
While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.
Also, use concise, specific, self-explanatory text, usually a single word. They should include a verb. If acting on something, their text should include the noun they're acting on, e.g. "Create Group".
Use type='submit' for submitting forms. Doing this will trigger the onClick action when the user presses the enter key within certain form fields.
Examples
Regular buttons:
Small buttons:
Bistate button - Join/Leave:
Bistate button - Follow/Unfollow:
Link button:
Link button with newWindow:
Submit button:
Loading button:
Full width:
With supported event handlers:
import Clickable from 'yamui/dist/components/Clickable';
A Clickable is an accessible, clickable area that accepts arbitrary children. It is styled
like a link by default, but can also be unstyled. Under the hood Clickable simply wraps
content in a button element.
Notes for use
Clickable should be used in place of NavigationLink when you need click interaction without navigation. By default a Clickable is styled like a link, but you can also set it to unstyled.
Examples
Inline:
Unstyled:
Unstyled block with FakeLink:
Wrapping block content:
Wrapping image:
import Dropdown from 'yamui/dist/components/Dropdown';
A Dropdown is a list in which the selected item is always visible, and the others are visible
on demand by clicking a button.
Notes for use
A Dropdown can be used in a controlled or uncontrolled manner.
Examples
Controlled dropdown:
Uncontrolled dropdown:
With a label:
With option templates, dividers and headers:
In a grid:
import EditableText from 'yamui/dist/components/EditableText';
Displays text which can be edited on click.
Notes for use
EditableText will inherit the text size of the nearest Block component.
Examples
With text and max length:
With prompt text and placeholder text:
With onBeginEditing, onEndEditing and onUpdate callbacks:
import FakeLink from 'yamui/dist/components/FakeLink';
A FakeLink is simply a span which imitates the styling of an <a> tag (or NavigationLink
component). It is meant to be nested within unstyled NavigationLink or Clickable
components, allowing an entire block of content to be an accessible tabbable element while
still showing individual nested "links" for sighted users.
NOTE: If you are looking for click interaction please see Clickable.
Examples
Basic example:
Inside an unstyled NavigationLink:
Inside a Clickable:
import FixedGridColumn from 'yamui/dist/components/FixedGrid';
A FixedGridColumn represents each column inside a FixedGrid. It should be wrapped in a
FixedGridRow.
FixedGrid is made up of two components - FixedGridRow and FixedGridColumn. FixedGrid is most commonly useful when you have one side of a layout that should maintain its width, and the content to the other side should grow horizontally to fill the available space.
Examples
Fixed left column with width:
Fixed left column without width:
Fixed right column with width:
Fixed right column without width:
Two fixed columns:
With gutters and spacing:
With vertical alignment:
import FixedGridRow from 'yamui/dist/components/FixedGrid';
A FixedGridRow represents each row inside a FixedGrid. It should wrap FixedGridColumns.
FixedGridRow should only be used to wrap FixedGridColumns.
import Heading from 'yamui/dist/components/Heading';
A Heading component renders an h1-h6 tag depending on the given level. You can also
override its visual styling to match a different level with size. Set size="none"
to render the heading as unstyled inline text.
Examples
Basic examples:
Size overrides:
import Hovercard from 'yamui/dist/components/Hovercard';
A Hovercard is a small popover overlay. It opens on click or
mouse enter, and closes on mouse out and ESC. It should be used with HovercardHeader and
HovercardBody components for consistent internal padding.
Examples
Default hover trigger:
Click trigger:
Hovercard without beak:
Hovercard with different alignments:
import HovercardBody from 'yamui/dist/components/Hovercard';
Body of a Hovercard component. Used to maintain a consistent layout.
To be rendered only inside a Hovercard component.
import HovercardHeader from 'yamui/dist/components/Hovercard';
Header of a Hovercard component. Used to maintain a consistent layout.
To be rendered only inside a Hovercard component.
import Image from 'yamui/dist/components/Image';
An Image renders an img element within a wrapper div. This div is displayed as
inline-block, so it behaves like a standard inline image. The height and width actually get
applied to the wrapper div, and the image will get scaled/positioned within the wrapper
depending on which props you provide.
Notes for use
Try to set a height and width whenever possible, as this will keep the browser from calculating reflows on re-render or on image load.
If an image is used as a supplemental icon, or screenreaders should not read it out loud for any other reason, provide an empty string as description. This is a required prop because a missing alt attribute means the screenreader will read the URL out loud.
Examples
Basic:
Fit cover:
Fit contain:
Fit center:
Fit not provided:
Fit none:
Full width:
Border types:
Handling load state:
import LayoutList from 'yamui/dist/components/LayoutList';
A LayoutList displays a list of items either horizontally or vertical. Horizontal list items
are evenly spaced with a fixed margin of 4px, and can be aligned to the right or left. Vertical
list items do not have any margin.
Notes for use
Note that spacing between list items uses standard GutterSize values. Horizontal list items default to 4px gutters, while vertical list items default to no gutters.
If you're looking for typography-based ordered and unordered lists, please see the List component.
Examples
Horizontal list of buttons:
Horizontal list of buttons aligned to the right:
Horizontal list with different gutter sizes:
Vertical list of users:
Vertical list with different gutter sizes:
import LayoutListItem from 'yamui/dist/components/LayoutList';
To be nested within a LayoutList component.
import List from 'yamui/dist/components/List';
A typographical list, rendering either a <ul> or <ol> element.
Examples
Default size:
Medium size (identical to default):
MediumSub size:
Small size:
Extra small size:
import MediaObject from 'yamui/dist/components/MediaObject';
A MediaObject renders an image on the left with blocks of descriptive content on the right. The
image area, and pieces of text content, are passed in as props, with size and layout determined
by the size prop.
Examples
With avatar:
With long text:
With allow text wrap:
With image:
With additional arbitrary UI:
import MenuButton from 'yamui/dist/components/MenuButton';
Notes for use
Context menu should be used as a menu button where you want to provide options that are hidden behind a click.
Examples
MenuButton with default Icon, and all applicable children properties
MenuButton with multiple headers in children
MenuButton with custom icon and dividers
MenuButton with iconSize specified
MenuButton with text specified
import MessageBar from 'yamui/dist/components/MessageBar';
A MessageBar displays relevant status information. You can use a MessageBar to tell the user
about a situation, and optionally provide actions for them to take.
Notes for use
Text that is too long for the context will wrap to two or more lines, but you should aim for short strings. Actions will grow from the right but should also take up as little horizontal space as possible.
Examples
Informational:
Warning:
Warning with an icon action:
Warning with an icon action and multiple lines:
Error with a link action:
import PreviewCard from 'yamui/dist/components/PreviewCard';
PreviewCard is a compact representation of an uploaded file or other attachment. It supports an editable description, and a loading experience (Spinner or percentage ProgressIndicator).
Notes for use
Add here any notes on how to use the component, or delete this section.
Examples
Basic usage:
With editable description:
With remove button:
With loading state:
With loading state and progress:
Editable with onClick and onRemove handlers:
import ProgressIndicator from 'yamui/dist/components/ProgressIndicator';
A ProgressIndicator is used to show the progress of an ongoing operation
e.g. a file upload.
Notes for use
ProgressIndicator spans the full width of its parent container. If you need to make it appear
a certain width, you have to set the width property of its parent container to the desired
width.
Examples
zero percent:
thirty percent:
one hundred percent:
import ScreenreaderText from 'yamui/dist/components/ScreenreaderText';
A ScreenreaderText simply hides its content from sight without hiding it from screenreaders.
Use this component whenever a screenreader should be able to read aloud additional context for
your UI features.
Notes for use
Generally just nest text within a ScreenreaderText component.
Examples
Basic:
import Spinner from 'yamui/dist/components/Spinner';
A Spinner is an outline of a circle which animates around itself indicating to the user that
things are processing. It is shown when we're unsure how long a task will take.
Examples
With visible text:
With invisible text:
With isCentered:
import SuggestionsList from 'yamui/dist/components/SuggestionsList';
A SuggestionsList displays a list of search results in a dropdown.
Examples
With no results:
When loading:
With results:
With results, when loading:
import Text from 'yamui/dist/components/Text';
A Text component simply renders a span. It offers size and color props so UI features don't
need to own this CSS. This is both a convenience for engineers and a way to enforce consistency
of supported text colors and font-size/line-height combinations.
Notes for use
Text is an inline element. Note that inline elements cannot set a smaller line-height than what is set or inherited by the nearest block-level parent element. For this reason, it is generally best to set a textSize on a parent Block component rather than on individual Text components.
Examples
Basic text:
With screenreader text:
Bold:
Uppercase:
Max width with ellipsis:
NOTE: Text with maxWidth will add an extra 1px of height to the bottom of its containing element, an unfortunate side-effect of overflow-hidden on the inline-block Text element. To maintain perfect vertical rhythm in the next block of text, give the next container -1px top margin or simply use <Block push={-1} />.
Different text colors:
Different text sizes:
Different text sizes with long text:
import TextArea from 'yamui/dist/components/TextArea';
TextArea is rendered as an html textarea tag, used to allow more than one line of text to be entered.
Examples
Basic
With a description
Auto-adjust Height
Disabled
Placeholder
Error
import TextField from 'yamui/dist/components/TextField';
The TextField component enables a user to type text into an app. It's used to capture a single line of text. The text displays on the screen in a simple, uniform format.
Examples
Basic
Disabled
With JSX Description
Max length
With Placeholder
With Error Message
With Error Message and Description. (NOTE: The description is hidden.)
With Prefix
With Suffix
Long Prefix
Long Prefix and Suffix
Short Prefix and Long Suffix
Long Prefix and Short Suffix
Required:
Required with Label:
onChange:
Controlled onChange with debounce:
Controlled with link in description:
Beside Button
Underlined Variation
Underlined With Description
Underlined With Error
import Tooltip from 'yamui/dist/components/Tooltip';
Tooltip wraps other content and provides additional context on hover or keyboard selection.
Notes for use
You should always wrap Tooltip around a tabbable element, ensuring keyboard navigation can focus on a nested element to trigger the tooltip.
Examples
Basic usage:
Dark Background and block-level child:
Very long text:
With directionalHint:
import UserPicker from 'yamui/dist/components/UserPicker';
The UserPicker is a thin wrapper of Fabric's NormalPeoplePicker is used to select one or more entities, such as people or groups.
Notes for use
The UserPicker is a thin wrapper of Fabric's NormalPeoplePicker is used to select one or more entities, such as people or groups. Entry points for PeoplePickers are typically specialized TextField-like input fields known as a "well", which are used to search for recipients from a list. When a recipient is selected from the list, it is added to the well as a specialized Persona that can be interacted with or removed. Clicking on a Persona from the well should invoke a PersonaCard or open a profile pane for that recipient.
Only required prop is onResolveSuggestions which can be a promise or function which returns a list of the IPersona or other supplied type.
Examples
Basic usage:
import VisibilityObserver from 'yamui/dist/components/VisibilityObserver';
VisibilityObserver uses the IntersectionObserver API to allow conditional child rendering and callbacks based
on viewport visibility. It will render the renderOutOfView prop until it is scrolled into view, then will
always render the renderInView prop instead. Callbacks will always be triggered on visibility changes.
Examples
Basic usage:
Notes for use
Because current bundlers do not always tree-shake properly, icons are exported individually, so you'll need to import each icon you need like this:
import Mail from 'yamui/dist/components/Icon/icons/Mail';The block prop may be necessary to remove extra line-height.
Examples
Icon library:
Sizes:
Auto-sized to text:
Auto-sized to headings:
Inline with text and color overrides:
import Illustrations from 'yamui/dist/components/Illustration/docs';
Notes for use
Because current bundlers do not always tree-shake properly, illustrations are exported individually, so you'll need to import each illustration separately.
Illustrations have different sizes, so you must import the proper size for your application.
import PDF20 from 'yamui/dist/components/Illustration/illustrations/PDF20';
import PDF48 from 'yamui/dist/components/Illustration/illustrations/PDF48';The block prop may be necessary to remove extra line-height.
Examples
Illustration library: