Skip to content
The plain component templates for Semantic-UI integration.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.eslintrc.js
.gitattributes
.gitignore
LICENSE
README.md
README_CRA.md
package.json
yarn.lock

README.md

Semantic-UI-ReactComponents

The only changed from Semantic-UI is JavaScript.

Table of Contents


Elements

Shared props

  • variant (string): Additional className

For example, if you want red button, add red to variant property.

<Button variant={'red'}>Basic red button</Button>

Button

import Button from 'Semantic-UI-ReactComponents/elements/Button'

Variants

<Button variant={'red'}>Basic red button</Button>
  • Icon button
// import Icon from 'Semantic-UI-ReactComponents/elements/Icon'

<Button icon>
  <Icon type={'paper plain'} />
</Button>
  • Labeled icon button
// import Icon from 'Semantic-UI-ReactComponents/elements/Icon'

<Button labeled icon>
  <Icon type={'pause'} />
  Pause
</Button>
  • Basic button
<Button basic>The real basic button</Button>
  • Inverted button
<Button inverted>Black!</Button>
  • Animated button
<Button.Animated variant={'red'}>
  <Button.Visible>Visible content</Button.Visible>
  <Button.Hidden>Hidden content</Button.Hidden>
</Button.Animated>

Button.Group

<Button.Group>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</Button.Group>
  • Icon button
// import Icon from 'Semantic-UI-ReactComponents/elements/Icon'

<Button.Group>
  <Button icon>
    <Icon type={'bold'} />
  </Button>
  <Button icon>
    <Icon type={'underline'} />
  </Button>
  <Button icon>
    <Icon type={'text width'} />
  </Button>
</Button.Group>

Icon

import Icon from 'Semantic-UI-ReactComponents/elements/Icon'

Variants

<Icon type={'paper plain'} />

Container

import Container from 'Semantic-UI-ReactComponents/elements/Container'

Variants

<Container>Contained</Container>
  • Text Container
<Container text>Contained</Container>
  • Aligned Container
<Container align='right(or center, left, justified)'>Contained</Container>
  • Fluid Container
<Container fluid>Contained</Container>

Divider

import Divider from 'Semantic-UI-ReactComponents/elements/Divider'

Variants

<Divider />
  • Hidden Divider
<Divider hidden />
  • Vertical Divider
<Divider vertical />
  • Horizontal Divider
<Divider horizontal />
  • Fitted Divider
<Divider fitted />
  • Setion Divider
<Divider setion />
  • Clearing Divider
<Divider clearing />

Placeholder

import Placeholder from 'Semantic-UI-ReactComponents/elements/Placeholder'

Variants

  • Basic placeholder
<Placeholder />
  • Linear placeholder
<Placeholder line />
  • Square (1:1 aspect ratio) placeholder (for image)
<Placeholder square image />
  • Rectangular (4:3 aspect ratio) placeholder (for image)
<Placeholder rectangular image />
  • Image header placeholder
<Placeholder image header>
  <Placeholder line />
  <Placeholder line />
</Placeholder>
  • Paragraph placeholder
<Placeholder paragraph>
  <Placeholder line />
  <Placeholder line />
  <Placeholder line />
  <Placeholder line />
  <Placeholder line />
</Placeholder>
  • Linear placeholder lengths
<Placeholder full line />
<Placeholder veryLong line />
<Placeholder long line />
<Placeholder medium line />
<Placeholder short line />
<Placeholder veryShort line />

Placeholder.Group

  • Basic placeholder group
<Placeholder.Group>
  <Placeholder line />
  <Placeholder line />
  <Placeholder line />
</Placeholder.Group>
  • Inverted placeholder group
<Placeholder.Group inverted>
  <Placeholder line />
  <Placeholder line />
  <Placeholder line />
</Placeholder.Group>
  • Active placeholder group
<Placeholder.Group active>
  <Placeholder line />
  <Placeholder line />
  <Placeholder line />
</Placeholder.Group>
  • Fluid placeholder group
<Placeholder.Group fluid>
  <Placeholder line />
  <Placeholder line />
  <Placeholder line />
</Placeholder.Group>

Header

import Header from 'Semantic-UI-ReactComponents/elements/Header'

Variants

  • Content headers (considered as page headers)
<Header huge>Huge header</Header>
<Header large>Large header</Header>
<Header medium>Medium header</Header>
<Header small>Small header</Header>
<Header tiny>Tiny header</Header>
  • Icon headers
// import Icon from 'Semantic-UI-ReactComponents/elements/Icon'

<Header icon>
  <Icon type={'settings'} />
  <Header.Content>
    Account Settings
    <Header sub>
      Manage your account settings and set e-mail preferences.
    </Header>
  </Header.Content>
</Header>
  • Sub headers
<Header sub>
Price
</Header>
<span>$19.99</span>
  • Subheaders
<Header>
  Account Settings
  <Header.Sub>
    Manage your account settings and set e-mail preferences.
  </Header.Sub>
</Header>
  • Disabled headers
<Header disabled>
  Disabled header
</Header>
  • Dividing headers
<Header dividing>
Dividing header
</Header>
  • Block headers
<Header block>
Block header
</Header>
  • Attached headers
<Header top attached>
  Top attached
</Header>
<Header attached>
  Attached
</Header>
<Header bottom attached>
  Bottom attached
</Header>
  • Floating headers
<Header right floated>
  Go forward
</Header>
<Header left floated>
  Go back
</Header>
  • Inverted headers
<Header inverted>
  Inverted!
</Header>

Text alignment

<Header right aligned>
  Right
</Header>
<Header left aligned>
  Left
</Header>
<Header justified>
  This should take up the full width even if only one line
</Header>
<Header center aligned>
  Center>
</Header>

Colored

  • Colored headers via variants
<Header variant={'red'}>Red</Header>
<Header variant={'orange'}>Orange</Header>
<Header variant={'yellow'}>Yellow</Header>
<Header variant={'olive'}>Olive</Header>
<Header variant={'green'}>Green</Header>
<Header variant={'teal'}>Teal</Header>
<Header variant={'blue'}>Blue</Header>
<Header variant={'purple'}>Purple</Header>
<Header variant={'violet'}>Violet</Header>
<Header variant={'pink'}>Pink</Header>
<Header variant={'brown'}>Brown</Header>
<Header variant={'grey'}>Grey</Header>

Flag

import Flag from 'Semantic-UI-ReactComponents/elements/Flag'

Variants

<Icon country={'kr'} />

Image

import Image from 'Semantic-UI-ReactComponents/elements/Image'

Variants

  • Normal image
<Image src="https://semantic-ui.com/images/wireframe/image.png" alt="sample" />
  • Image link
<Image src="https://semantic-ui.com/images/wireframe/image-text.png" href="https://google.com/" alt="sampleToGoogle" />
  • Hidden image
<Image ... hidden />
  • Avatar image
<Image ... avatar />
  • Bordered image
<Image ... bordered />
  • Fluid image
<Image ... fluid />
  • Rounded image
<Image ... rounded />
  • Circular image
<Image ... circular />
  • Vertically aligned image
<Image ... aligned='vertically' />
  • Cenetered image
<Image ... centered />
  • Spaced image
<Image ... spaced='right' />
  • Floated image
<Image ... floated />

Image sizes

<Image ... size='mini' />
<Image ... size='tiny' />
<Image ... size='small' />
<Image ... size='medium' />
<Image ... size='large' />
<Image ... size='big' />
<Image ... size='huge' />
<Image ... size='massive' />

Image group

<Image.Group size='tiny'>
  <Image ... />
  <Image ... />
  <Image ... />
</Image.Group>

Label

import Label from 'Semantic-UI-ReactComponents/elements/Label'

Variants

  • Normal label (with Icon)
// import Icon from 'Semantic-UI-ReactComponents/elements/Icon'

<Label>
  <Icon type='paper plain' /> 23
</Label>
  • Image label

In the official Semantic-UI documentation, it didn't take up ui image class names.

<Label image>
  <img src="https://semantic-ui.com/images/avatar/small/joe.jpg" />
</Label>
  • Pointing label
// MISSING COMPONENT: FORM

<Label ... pointing>
  Please enter a value
</Label>
<Label ... pointing='right'>
  Please enter a value
</Label>
  • Label at corner
// import Image from 'Semantic-UI-ReactComponents/elements/Image'
// import Icon from 'Semantic-UI-ReactComponents/elements/Icon'

<Image ... fluid>
  <Label corner='left'>
    <Icon type='paper plain' />
  </Label>
  <img src="https://semantic-ui.com/images/wireframe/image.png" />
</Image>
<Image ... fluid>
  <Label corner='right'>
    <Icon type='paper plain' />
  </Label>
  <img src="https://semantic-ui.com/images/wireframe/image.png" />
</Image>
  • Tagged label
<Label tag>New</Label>
  • Ribon label
// MISSING COMPONENT: FORM
// MISSING COMPONENT: SEGMENT

<Label ribbon='right'>Specs</Label>
  • Attached label
<Label attached='top'>Top attached label</Label>
<Label attached='bottom'>Bottom attached label</Label>
<Label attached='right'>Right attached label</Label>
<Label attached='left'>Left attached label</Label>
  • Horizontal label
<Label horizontal variant='red'>Fruit</Label>
  • Floating label
// MISSING COMPONENT: MENU

<div class='item'>
  Some menu item
  <Label floating>
    22
  </Label>
</div>
  • Detailed label
<Label>
  Dogs
  <Label.Detail>234</Label.Detail>
</Label>
  • Icon label
// import Icon from 'Semantic-UI-ReactComponents/elements/Icon'

<Label>
  <Icon type='paper plain' />
</Label>
  • Image label
// import Image from 'Semantic-UI-ReactComponents/elements/Image'

<Label>
  <Image avatar spaced='right' ... />
  Elliot
</Label>
  • Linked label
<Label href='https://google.com/'>
  Google!
</Label>
  • Circular label
<Label circular>
  1
</Label>
  • Basic label
<Label basic ...>
  Basic
</Label>
  • Colored label via variant
<Label basic variant='red'>
  Red basic label! Also, it is colored.
</Label>

Label sizes

<Label ... size='mini'>Mini</Label>
<Label ... size='tiny'>Tiny</Label>
<Label ... size='small'>Small</Label>
<Label ... size='medium'>Medium</Label>
<Label ... size='large'>Large</Label>
<Label ... size='big'>Big</Label>
<Label ... size='huge'>Huge</Label>
<Label ... size='massive'>Massive</Label>

Label group

  • Tagged label group
<Label.Group tag>
  /* Labels */
</Label.Group>
  • Circular label group
<Label.Group circular>
  /* Labels */
</Label.Group>
  • Colored label group via variant
<Label.Group variant='blue'>
  /* Labels */
</Label.Group>
You can’t perform that action at this time.