@equinor/eds-core-react

@equinor/eds-core-react

NB! This is an early version of the EDS Core React components in Typescript and meant for testing only.

Available components to help style your React application as an Equinor application. We publish new components regularly so make sure to check back often!

Make sure to check out our Storybook for more examples! Read the changelog for details on specific releases.

Installation

npm install @equinor/eds-core-react styled-components

Components

Available ✅

• Accordion
• Banner
• Breadcrumbs
• Button
  • Contained
  • Contained w/icon left/right
  • Outlined
  • Outlined w/icon left/right
  • Ghost
  • Ghost Icon
  • Ghost w/icon left/right
• Cards
• Chips
• Dialog
• Divider
• Icon
• List
• Menu
• Pagination
• Popover
• Progress indicators
• Scrim
• Search
• Selection Controls
• Side Sheet
• Slider
• Snackbar
• Table
• Table of contents
• Tabs
• TextField
• Tooltip
• TopBar
• Typography

In progress 👷‍♀️

• Navigation drawer

TODO 🛠️

• App launcher
• Stepper

Usage

import * as React from 'react'
import { render } from 'react-dom'
import { Button, Typography } from '@equinor/eds-core-react'

const App = () => (
  <>
    <Typography variant="h1" bold>Buttons</Typography>

    <Typography variant="h2">Contained (default)</Typography>

    <Button>Primary</Button>
    <Button color="secondary">Secondary</Button>
    <Button color="danger">Danger</Button>
    <Button disabled>Disabled</Button>

    <Typography variant="h2">Outlined</Typography>

    <Button variant="outlined">Primary</Button>
    <Button variant="outlined" color="secondary">Secondary</Button>
    <Button variant="outlined" color="danger">Danger</Button>
    <Button variant="outlined" disabled>Disabled</Button>

    <Typography variant="h2">Ghost</Typography>

    <Button variant="ghost">Primary</Button>
    <Button variant="ghost" color="secondary">Secondary</Button>
    <Button variant="ghost" color="danger">Danger</Button>
    <Button variant="ghost" disabled>Disabled</Button>
  </>
)

render(<App />, document.getElementById('root'))