Renders styled html <button> element
<button>
import React, { Component } from 'react'; import { Button } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; class Example extends Component { render() { return ( <Button onClick={() => console.log('Button clicked')}>Click Here</Button> ); } }
Accepts all html <button> props such as onClick, className etc.
onClick
className
'primary'
'secondary'
'danger'
'plain'
'outline'
'plainWithPadding'
undefined
true
false
import React, { Component } from 'react'; import { Text } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; class Example extends Component { render() { return <Text>A block text</Text>; } }
'h1'
'h2'
'h3'
'h4'
'h5'
'h6'
'p'
'span'
'strong'
'emphasis'
'subdued'
'code'
'auto'
auto
Variation of Text component which has element as 'h1'
Variation of Text component which has element as 'h2'
Variation of Text component which has element as 'h3'
Variation of Text component which has element as 'span'
Variation of Text component which has variation as 'code'
import React, { Component } from 'react'; import { Text, PageTitle, SectionHeading, SubSectionHeading, InlineCode, VerticalStack } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; class Example extends Component { render() { return ( <VerticalStack> <PageTitle>New Page</PageTitle> <SectionHeading>Component Details</SectionHeading> <SubSectionHeading>Button</SubSectionHeading> <Text> Button is a styled <InlineCode><button></InlineCode> element </Text> </VerticalStack> ); } }
Renders styled html <div> element with label, error and children.
<div>
import React, { Component } from 'react'; import { FormField } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; class Example extends Component { render() { return ( <FormField label={'Render a labeled input'}> <input /> </FormField> ); } }
'top'
'right'
'bottom'
'left'
Renders styled html <input> element
<input>
import React, { useState } from 'react'; import { Input } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; function Example() { const [value, setValue] = useState(); return <Input value={value} onChange={(e) => setValue(e.target.value)} />; }
Renders styled html <textarea> element
<textarea>
import React, { useState } from 'react'; import { TextArea } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; function Example() { const [value, setValue] = useState(''); return <TextArea value={value} onChange={(e) => setValue(e.target.value)} />; }
Formfield with child element as Input or TextArea component.
import React, { useState } from 'react'; import { TextField } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; function Example() { const [value, setValue] = useState(''); return ( <TextField label='Enter your name' value={value} onChange={(e) => setValue(e.target.value)} /> ); }
Accepts all FormField props - label, labelPosition and error
label
labelPosition
error
Renders styled html <input> element with type='checkbox'
type='checkbox'
import React, { useState } from 'react'; import { Checkbox } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; function Example() { const [checked, setChecked] = useState(false); return ( <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} /> ); }
Accepts all input props
'normal'
'large'
Checkbox component wrapped in FormField
import React, { useState } from 'react'; import { CheckboxField } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; function Example() { const [checked, setChecked] = useState(false); return ( <CheckboxField checked={checked} onChange={(e) => setChecked(e.target.checked)} label='This is a checkbox' /> ); }
Accepts all FormField and Checkbox props
Renders a select dropdown. Does not use the native html select element.
import React, { useState } from 'react'; import { Select, SelectOption, HorizontalStack, Text } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; function Example() { const [value, setValue] = useState(); return ( <Select value={value} onValueChange={setValue} placeholder={'Select something?'} > <SelectOption value='op1'>Option 1 as string</SelectOption> <SelectOption value='op2'>Option 2 as string</SelectOption> <SelectOption value='star'> <HorizontalStack itemsVerticalAlignment='center'> <Text> Option with <Text variation='emphasis'>component</Text> </Text> </HorizontalStack> </SelectOption> </Select> ); }
A container with shadow and padding
import React from 'react'; import { Card } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; function Example() { return <Card>A block text</Card>; }
'low'
'high'
A floating container and its controller
mport React, { useState } from "react"; import { Popover, Button } from "base-elements-react"; import "base-elements-react/dist/index.css"; function Example() { const [open, setOpen] = useState(false); const toggleOpen = () => setOpen(!open); const close = () => setOpen(false); return ( <Popover anchor={<Button onClick={toggleOpen}>Toggle Popover</Button>} open={open} onOutsideClick={close} xLocation="snap_left_edge" yLocation="bottom" > Hello! </Popover> ); }
open
'snap_left_edge'
'center'
'snap_right_edge'
'top_cover_anchor'
'bottom_cover_anchor'
import React, { Component } from 'react'; import { Table, TableHead, TableRow, TableBody, TableCell } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; class Example extends Component { render() { return ( <Table hasRowDivider> <TableHead> <TableRow> <TableCell>Sr. no.</TableCell> <TableCell>Planet</TableCell> <TableCell>Distance from sun</TableCell> </TableRow> </TableHead> <TableBody> <TableRow> <TableCell>1</TableCell> <TableCell>Mercury</TableCell> <TableCell>46.098 million km</TableCell> </TableRow> <TableRow> <TableCell>2</TableCell> <TableCell>Venus</TableCell> <TableCell>107.78 million km</TableCell> </TableRow> <TableRow> <TableCell>3</TableCell> <TableCell>Earth</TableCell> <TableCell>149.48 million km</TableCell> </TableRow> <TableRow> <TableCell>4</TableCell> <TableCell>Mars</TableCell> <TableCell>219.16 million km</TableCell> </TableRow> </TableBody> </Table> ); } }
100%
Table cell that specifically renders 'td' element
'td'
Table cell that specifically renders 'th' element
'th'
Renders as `{children}
Variant of Table component
import React, { Component } from 'react'; import { HeaderTable, TableHeadRow, TableRow, TableCell } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; class Example extends Component { render() { return ( <HeaderTable hasRowDivider header={ <TableHeadRow> <TableCell>Sr. no.</TableCell> <TableCell>Planet</TableCell> <TableCell>Distance from sun</TableCell> </TableHeadRow> } > <TableRow> <TableCell>1</TableCell> <TableCell>Mercury</TableCell> <TableCell>46.098 million km</TableCell> </TableRow> <TableRow> <TableCell>2</TableCell> <TableCell>Venus</TableCell> <TableCell>107.78 million km</TableCell> </TableRow> <TableRow> <TableCell>3</TableCell> <TableCell>Earth</TableCell> <TableCell>149.48 million km</TableCell> </TableRow> <TableRow> <TableCell>4</TableCell> <TableCell>Mars</TableCell> <TableCell>219.16 million km</TableCell> </TableRow> </HeaderTable> ); } }
TableHeadRow
TableHead
import React, { useState } from 'react'; import { Button, Modal, ModalHeader } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; export function Example() { const [open, setOpen] = useState(false); return ( <Modal open={open} onClose={() => setOpen(false)}> <ModalHeader addCloseAction title='lorem ipsum text' onClose={() => setOpen(false)} > <Button variation='plain'>Save</Button> </ModalHeader> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </Modal> ); }
ModalHeader
props.onClose
0
Modal
onClose
Renders styled html <a> element
<a>
import React from 'react'; import { Link } from 'base-elements-react'; import 'base-elements-react/dist/index.css'; export function Example() { // const [open, setOpen] = useState<boolean>(false); return ( <Link href='https://www.example.com' target='_blank'> Go to example </Link> ); } function MyAnchor(props) { return ( <a className='hello' {...props}> {props.children} </a> ); } export function ExampleTwo() { // const [open, setOpen] = useState<boolean>(false); return ( <Link href='https://www.example.com' component={MyAnchor} variation='filled' target='_blank' > Go to example </Link> ); }
Accepts all html <a> props such as href.
href
'filled'
plain