The Accordion element generally expects two child nodes, a "top" and a "bottom" node.

<Accordion customClassOpen="qAndaOpen" customClassClosed="qAndaClosed">
    <div className="qClass" style={{ backgroundColor: 'white', border: '1px solid black', padding: '30px', }}>
        My Question
    </div>
    <div className="aClass" style={{ backgroundColor: 'white', border: '1px solid red', padding: '30px', }}>
        <p>My Answer 1</p>
        <p>My Answer 2</p>
    </div>
</Accordion>

The ActionBar element has an exposed Option object that is used to add options. This is the only allowed child type.
Note: only options being shown can be disabled

<ActionBar onClick={(value) => { alert(value); }} optionsToShow={3}>
    <ActionBar.option value="view" iconClass="fa-search" disabled>View</ActionBar.option>
    <ActionBar.option value="edit" iconClass="fa-pencil" highlighted>Edit</ActionBar.option>
    <ActionBar.option value="option" iconClass="fa-check-box-outline-blank">Select</ActionBar.option>
    <ActionBar.option value="copy" iconClass="fa-copy-btl">Copy</ActionBar.option>
    <ActionBar.option value="move" iconClass="fa-move">Move</ActionBar.option>
</ActionBar>

An onClick callback will pass the value attribute specified on each ActionBar.option.

The number of options shown is configurable, in addition to the "More" text and iconClass.

Pass the function for the action to be called by that button in the onClick prop. Alternatively, pass an href prop for <a /> functionality instead.

<Button onClick={(e) => alert('Clicky clicky!', e.target)}>Click me</Button>

Use any of the available button style types to quickly create a styled button. Just modify the buttonStyle prop.

Modify the size prop to select the button size, or make the button block level by adding the isFullWidth prop.

Choosing fill as the size prop will cause the button to fill the available space inside its parent container. It achieves this using CSS3 flexbox, so the parent container must use display: flex.

By default, the <Button /> component generates a <button /> DOM element tag. If you need a link that uses button styling, pass a link in the href prop and it will make a <a /> element instead.

<DateInput />

The Netscape Navigator of the modern times: Internet Explorer. The children of this component will not be rendered in IE. It also includes a utility function getIeVersion for use in other components. getIeVersion returns false is the browser is not internet explorer.

The following example will not render in IE:

The Dropdown element has an exposed option object that is used to add options. This is the only allowed child type.

<Dropdown value={"one"}>
    <Dropdown.option value={"one"}>I'm the default</Dropdown.option>
    <Dropdown.option value={"two"}>Hey</Dropdown.option>
    <Dropdown.option value={"three"}>how you doin'?</Dropdown.option>
</Dropdown>

Specify a string via defaultValue prop, which will display in the button when nothing is selected. As soon as a selection is made, the string disappears. This mitigates situations where want to force the user to pick an item, but don't want to include a default option in the dropdown that can be selected again.

By default, the dropdown expands based on the width of the longest string of th text from its options. Specify a minimum width with the minWidth prop if you want something longer.

Specific variant of TooltipMenu that is used for navigation-style header bars.

<div>
  <FullWidthMenu title={'My Title'} onClick={(value) => { alert(value); }}>
    <FullWidthMenu.option value='copy'><i className="fa fa-copy-btl" />Copy</FullWidthMenu.option>
    <FullWidthMenu.option value='move'><i className="fa fa-move" />Move</FullWidthMenu.option>
    <FullWidthMenu.option value='down'><i className="fa fa-download" />Download</FullWidthMenu.option>
  </FullWidthMenu>
</div>

The PaginationBar helps to navigate paginated data. Users can select specific pages via the page blocks, or the page setter input and dropdown. The number of per-page entries can also be set.

All elements apart from the central page numbers element can be toggled.

Get a bare progress bar by setting logoUrl and title to empty strings.

The width stretches to fill the parent container.

This is a "dumb" implementation of the radio element. They aren't aware of each other, so you'll have to manage their checked or unchecked state via a parent component's state.

class RadioExample extends React.Component {
    constructor(props) {
        super(props);

        // decide which one gets selected by default
        this.state = {
            selected: "1",
        }
        this.onClick = this.onClick.bind(this);
    }
    onClick(e, params) {
        this.setState({
            selected: params.value,
        });
    }
    render() {

        // the "checked" prop is decided by this component's state.
        return (
            <div>
                <Radio
                    checked={this.state.selected === "1"}
                    name="radio"
                    label="1"
                    value="1"
                    onClick={this.onClick} 
                 />
                <Radio
                    checked={this.state.selected === "2"}
                    name="radio"
                    label="2"
                    value="2"
                    onClick={this.onClick} 
                 />
                <Radio
                    checked={this.state.selected === "3"}
                    name="radio"
                    label="3"
                    value="3"
                    onClick={this.onClick} 
                 />

            </div>
        );

    }
}
<RadioExample1 />

... and some other stuff. The underlining and html tags are to test xss issues with input text parsing.

Saving text:

Setting transparent will make the text input transparent with white text.

A character count and limit can be displayed using the limit option. When the text length exceeds the limit, the error styling is applied, the status text displays the number of characters by which the text exceeds the limit, and the changes do not save.

Raw data input from the text editor itself can be provied to a new instance of the editor via initialValueRaw

Tabs consist of several related elements in the following form:

import { Tabs, TabList, Tab, TabPanel, } from 'Tabs';

const MyComponent = () => (
    <Tabs>
        <TabList>
            <Tab>One</Tab>
            <Tab>Two</Tab>
            <Tab>Three</Tab>
        </TabList>
        <TabPanel>Content One</TabPanel>
        <TabPanel>Content Two</TabPanel>
        <TabPanel>Content Three</TabPanel>
    </Tabs>
);

Tab elements can either be imported separately, as shown above, or can be referenced statically from the top-level Tabs component:

import Tabs from 'Tabs';

const MyComponent = () => (
    <Tabs>
        <Tabs.List>
            <Tabs.Tab>One</Tabs.Tab>
            <Tabs.Tab>Two</Tabs.Tab>
            <Tabs.Tab>Three</Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel>Content One</Tabs.Panel>
        <Tabs.Panel>Content Two</Tabs.Panel>
        <Tabs.Panel>Content Three</Tabs.Panel>
    </Tabs>
);

Other notes:

• The <TabList /> must be the first child of Tabs
• The number of Tabs must be equal to the number of TabPanels
• TabPanels are removed from the DOM when they are hidden.

Because they both share many properties, textarea and <input type="text" /> have been merged into a single TextInput component. Toggle usage by setting multiline to true or false accordingly.

Setting style to transparent-inverse will make the text input / textarea transparent with white text.

Setting size to flex allows the width and height of the textinput to fill the surrounding parent div.

Setting size to flex allows the width and height of the textinput to fill the surrounding parent div.

A character limit may be imposed with the limit option.

Exposing some of the native JS events of the internal input field: focus and select

Similar to the Dropdown component, the only allowable child for TooltipMenu are TooltipMenu.option. Pass any element to the trigger prop will display the passed element as a clickable area which, upon clicking, will show the menu:

// Pass a button to be displayed that a user can click on.
// no need to specify any onClick handlers.
const trigger = (
  <Button>
    Click me.
  </Button>
);
const MyComp = () => (
    <TooltipMenu trigger={trigger}>
        <TooltipMenu.option value="one">First option</TooltipMenu.option>
        <TooltipMenu.option value="two">Second option</TooltipMenu.option>
        <TooltipMenu.option value="three">Third option</TooltipMenu.option>
    </TooltipMenu>
);