Design SystemComponents

Code

<Code lang="">code</Code>

Callout

Usage

<Callout closeButton dom="section">
    Message
</Callout>

Table

With caption / full-Width

With caption / Center

Usage

<Table caption="Table Caption" center fullWidth>
    <thead>
        <tr>
            <th>Head</th>
            <th>Head</th>
            <th>Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </tbody>
</Table>

Input

Usage

<Input
    label="Label"
    placeholder="Input text here..."
    helpText="This is helpText"
    errorMessage="Error!"
    required
/>

Textarea

Select

Usage

<Select
    label="Label"
    helpText="This is helpText"
    required
    errorMessage="Error!"
    options={{
        option1: 'Option 1',
        option2: 'Option 2',
        option3: 'Option 3',
    }}
/>

Switch

Usage

<Switch />

Input Group

Usage

<InputGroup
    label="Label"
    placeholder="Input text here..."
    helpText="This is helpText"
    required
/>

Button Group

Article Cards (Loading)