Basic button. Icon and labeled buttons have own components

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`unknown`	`true`
`className`	`string`		Additional CSS ui classes
`animated`	`union`		Adds a fade or slide animation on hover. One of type: `enum` `bool`
`attached`	`union`		It's attached to some other attachable component. One of type: `enum` `bool`
`basic`	`bool`		Adds simple styling to the component.
`circular`	`bool`		A button can be circular
`color`	`string`		Adds a SemanticUI color class.
`compact`	`bool`		Reduces the padding on the component.
`emphasis`	`enum`		A button can be formatted to show different levels of emphasis One of: `primary` `secondary` `positive` `negative`
`floated`	`enum`		Forces to component to float left or right. One of: `left` `right`
`fluid`	`bool`		The component fills the parent components horizontal space.
`inverted`	`bool`		Styles the component for a dark background.
`size`	`enum`		Adds a SemanticUI size class. One of: `mini` `tiny` `small` `medium` `large` `big` `huge` `massive`
`state`	`enum`		Indicates whether the button is currently highlighted or disabled. One of: `active` `disabled` `loading`
`toggle`	`bool`		A button can be formatted to toggle on and off

Standard Buttons

Emphasis Button

Animated Button

Signup for our super account

Basic button

Add friend

Colored button

Inverted

States

Sizes

Compact

Toggle

Group of buttons

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`attached`	`enum`		It's attached to some other attachable component. One of: `bottom` `top`
`basic`	`bool`		Adds simple styling to the component.
`color`	`string`		Adds a SemanticUI color class.
`compact`	`bool`		Reduces the padding on the component.
`equal`	`bool`		Forces all children to an equal width.
`floated`	`enum`		Forces to component to float left or right. One of: `left` `right`
`inverted`	`bool`		Styles the component for a dark background.
`size`	`enum`		Adds a SemanticUI size class. One of: `mini` `tiny` `small` `medium` `large` `big` `huge` `massive`
`vertical`	`bool`		Forces child components to render vertically.

Buttons

Icon button es un button con icon, en serio

Props

Name	Type	Default	Description
`animated`	`union`		Adds a fade or slide animation on hover. One of type: `enum` `bool`
`attached`	`union`		It's attached to some other attachable component. One of type: `enum` `bool`
`basic`	`bool`		Adds simple styling to the component.
`circular`	`bool`		A button can be circular
`color`	`string`		Adds a SemanticUI color class.
`compact`	`bool`		Reduces the padding on the component.
`emphasis`	`enum`		A button can be formatted to show different levels of emphasis One of: `primary` `secondary` `positive` `negative`
`floated`	`enum`		Forces to component to float left or right. One of: `left` `right`
`fluid`	`bool`		The component fills the parent components horizontal space.
`inverted`	`bool`		Styles the component for a dark background.
`size`	`enum`		Adds a SemanticUI size class. One of: `mini` `tiny` `small` `medium` `large` `big` `huge` `massive`
`state`	`enum`		Indicates whether the button is currently highlighted or disabled. One of: `active` `disabled` `loading`
`toggle`	`bool`		A button can be formatted to toggle on and off
`defaultClasses`	`unknown`	`true`
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`className`	`string`		Additional CSS ui classes
`iconColor`	`string`		Adds a SemanticUI color class to the icon.
`iconComponent`	`custom`		Icon component
`name`	`string`	Required	Adds a SemanticUI name class to the icon.

IconButton is just button with icon

Can use other button props

With caption

Test

Labeled button renders button with label, either text label or icon

Props

Name	Type	Default	Description
`animated`	`union`		Adds a fade or slide animation on hover. One of type: `enum` `bool`
`attached`	`union`		It's attached to some other attachable component. One of type: `enum` `bool`
`basic`	`bool`		Adds simple styling to the component.
`circular`	`bool`		A button can be circular
`color`	`string`		Adds a SemanticUI color class.
`compact`	`bool`		Reduces the padding on the component.
`emphasis`	`enum`		A button can be formatted to show different levels of emphasis One of: `primary` `secondary` `positive` `negative`
`floated`	`enum`		Forces to component to float left or right. One of: `left` `right`
`fluid`	`bool`		The component fills the parent components horizontal space.
`inverted`	`bool`		Styles the component for a dark background.
`size`	`enum`		Adds a SemanticUI size class. One of: `mini` `tiny` `small` `medium` `large` `big` `huge` `massive`
`state`	`enum`		Indicates whether the button is currently highlighted or disabled. One of: `active` `disabled` `loading`
`toggle`	`bool`		A button can be formatted to toggle on and off
`defaultClasses`	`unknown`	`true`
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`className`	`string`		Additional CSS ui classes
`labeled`	`enum`	`right`	Label position, default to right One of: `left` `right`
`labelType`	`enum`	`text`	Type of label, could be text label or icon One of: `text` `icon`
`label`	`string`	Required	Label, if given string will be used as label text or icon name (if labelType is icon).
`labelComponent`	`custom`		Label component. Default will be Icon for labelType icon and Label for labelType label

Labeled Button

Oh uh

With button icon and label

Like me

Oh uh

By default label placement is the right, you can change it to left side

Like me

Oh uh

Oh no

Hate me

You can control label by passing labelComponent

Oh no

You can have icon instead as label

Icon Labeled button

You can pass other Button props to the LabeledButton

Like me

Oh uh

Icon Labeled button

Control icon for icon labeled button

Custom icon

Social button is simple social colored button with social icon. This is ordinary button,

Props

Name	Type	Default	Description
`animated`	`union`		Adds a fade or slide animation on hover. One of type: `enum` `bool`
`attached`	`union`		It's attached to some other attachable component. One of type: `enum` `bool`
`basic`	`bool`		Adds simple styling to the component.
`circular`	`bool`		A button can be circular
`color`	`string`		Adds a SemanticUI color class.
`compact`	`bool`		Reduces the padding on the component.
`emphasis`	`enum`		A button can be formatted to show different levels of emphasis One of: `primary` `secondary` `positive` `negative`
`floated`	`enum`		Forces to component to float left or right. One of: `left` `right`
`fluid`	`bool`		The component fills the parent components horizontal space.
`inverted`	`bool`		Styles the component for a dark background.
`size`	`enum`		Adds a SemanticUI size class. One of: `mini` `tiny` `small` `medium` `large` `big` `huge` `massive`
`state`	`enum`		Indicates whether the button is currently highlighted or disabled. One of: `active` `disabled` `loading`
`toggle`	`bool`		A button can be formatted to toggle on and off
`defaultClasses`	`unknown`	`true`
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`className`	`string`		Additional CSS ui classes
`name`	`string`	Required	Adds a SemanticUI name class to the icon.

Social buttons

If doesn't contain any children when being rendered as IconButton

Supports almost all standard Button properties

If contain children when renders as Button with icon

Facebook

Divider

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`aligned`	`enum`		Content segment vertically or horizontally One of: `horizontal` `vertical`
`clearing`	`bool`		A divider can clear the contents above it
`header`	`bool`		Formats divider as header-like (taking less space and don't capitalize content)
`hidden`	`bool`		A hidden divider divides content without creating a dividing line
`inverted`	`bool`		A divider can have its colors inverted
`spacing`	`enum`		Divider spacing One of: `fitted` `padded`

Divider

A divider visually segments content into groups

Types

Divider

A standard divider

To add a divider between parts of a grid use a divided grid variation.

Vertical Divider

A divider can segment content vertically

Vertical dividers requires position: relative on the element that you would like to contain the divider
A vertical divider will automatically swap to a horizontal divider at mobile resolutions when used inside a stackable grid
<Grid columns={3} relaxed="very" style={{position: "relative"}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nam efficitur nibh eget commodo hendrerit. Nulla facilisi. Mauris commodo porttitor dolor. AND Vivamus dui dui, eleifend vitae imperdiet ut, tristique bibendum ante.

Fusce at orci ante. Nulla varius leo in ante cursus sodales. NOT Etiam est erat, elementum eu urna ut, finibus sollicitudin metus.

Morbi dapibus id risus quis ultrices. Nunc hendrerit est vitae elementum dignissim.

Horizontal Divider

A divider can segment content horizontally

Horizontal dividers can also be used in combination with headers and icons to create different styles of dividers.
Dividers will automatically vary the size of their dividing rules to match the length of your text
<Input action placeholder="Order #">

SyntaxError: unknown: Adjacent JSX elements must be wrapped in an enclosing tag (2:2)
  1 |       <Button color="blue">Search</Button>
> 2 |   </Input>
    |   ^
  3 |   <Divider aligned="horizontal">Or</Divider>
  4 |   <IconButton name="add" color="teal">Create New Order</IconButton>

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`unknown`	`i`
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`name`	`string`	Required	The country code, name or alias of the flag

Just a flag

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`aligned`	`enum`		A header can have its text aligned to a side One of: `right` `left` `justified` `center`
`attached`	`union`	`false`	A header can be attached to other content, like a segment One of type: `enum` `bool`
`color`	`string`		A header can be formatted with different colors
`disabled`	`bool`		A header can show that it is inactive
`divider`	`bool`		Header may be used as divider
`emphasis`	`enum`		dividing: can be formatted to divide itself from the content below it block: can be formatted to appear inside a content block One of: `dividing` `block`
`floated`	`enum`		A header can sit to the left or right of other content One of: `right` `left`
`icon`	`string`		Icon name for header. This will turn header into icon header (ui icon header)
`iconComponent`	`custom`		Icon component
`inverted`	`bool`		A header can have its colors inverted for contrast
`item`	`bool`	`true`	May be used as menu item
`size`	`string`		May have various sizes

Header

You can use div with size for header also

Icon header:

Header with icon content

This is slightly differ from icon header

Image header:

Header could be disabled

Variations

Dividing:

dasfdasfdsafds

Block:

Attached header

Floating:

Text Alignment

Colored

Inverted

Sub header, same as header but with 'sub' class name Deprecated

Props

Name	Type	Default	Description
`aligned`	`enum`		A header can have its text aligned to a side One of: `right` `left` `justified` `center`
`attached`	`union`	`false`	A header can be attached to other content, like a segment One of type: `enum` `bool`
`color`	`string`		A header can be formatted with different colors
`disabled`	`bool`		A header can show that it is inactive
`divider`	`bool`		Header may be used as divider
`emphasis`	`enum`		dividing: can be formatted to divide itself from the content below it block: can be formatted to appear inside a content block One of: `dividing` `block`
`floated`	`enum`		A header can sit to the left or right of other content One of: `right` `left`
`icon`	`string`		Icon name for header. This will turn header into icon header (ui icon header)
`iconComponent`	`custom`		Icon component
`inverted`	`bool`		A header can have its colors inverted for contrast
`item`	`unknown`	`false`
`size`	`string`		May have various sizes
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`unknown`	`true`
`className`	`string`		Additional CSS ui classes

SubHeader

Deprecated, use just Header inside another Header instead

Almost like header

$9999999999

Usually used as content in other header

Icon

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`unknown`	`i`
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`aligned`	`enum`		Vertical alignment of icon. Useful when child of other elements: Item One of: `top` `middle` `bottom`
`bordered`	`bool`		An icon can be formatted to appear bordered
`circular`	`bool`		An icon can be formatted to appear circular
`color`	`string`		An icon can be formatted with different colors
`corner`	`bool`		Render as corner icon if used in
`state`	`enum`		Icon could be disabled or used as simple loader One of: `disabled` `loading`
`fitted`	`bool`		An icon can be fitted, without any space to the left or right of it.
`floated`	`enum`		Floated icon: Useful when child of other elements: Item One of: `left` `right`
`flipped`	`enum`		An icon can be flipped One of: `horizontally` `vertically`
`inverted`	`bool`		An icon can have its colors inverted for contrast
`link`	`bool`		Could be formatted as link
`name`	`string`		Icon name
`size`	`enum`		Icon size One of: `mini` `tiny` `small` `medium` `large` `big` `huge` `massive`
`rotated`	`enum`		An icon can be rotated One of: `clockwise` `counterclockwise`

Icon

States:

Disabled:

Loading:

Variations:

Fitted:

Tight spacingTight spacing

Size:

Link:

When passing onClick handler it automatically become link icon

Flipped:

Rotated:

Circular:

Bordered:

Colored:

Inverted:

Group of icons

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`unknown`	`i`
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`size`	`enum`		Size of icon group One of: `mini` `tiny` `small` `medium` `large` `big` `huge` `massive`

Group of icons appear together

You can assign one icon in group as corner icon

Just an image

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`unknown`	`img`
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`aligned`	`enum`		An image can specify its vertical alignment One of: `top` `middle` `bottom`
`avatar`	`bool`		An image may be formatted to appear inline with text as an avatar
`bordered`	`bool`		An image may include a border to emphasize the edges of white or transparent content
`centered`	`bool`		An image can appear centered in a content block
`fluid`	`bool`		An image can take up the width of its container
`floated`	`enum`		An image can sit to the left or right of other content One of: `right` `left`
`size`	`string`		An image may appear at different sizes
`spaced`	`union`		An image can specify that it needs an additional spacing to separate it from nearby content One of type: `enum` `bool`
`src`	`string`	Required	Image src
`shape`	`enum`		Image shape One of: `circular` `rounded`
`state`	`enum`		Image state, could be disabled or hidden One of: `disabled` `visible` `hidden`
`wrapComponent`	`union`	`false`	Wrap image component under other component, for example or In this case this component will receive image classes instead One of type: `bool` `custom`

Image

You can wrap image as child element of another element:

States:

Hidden

Disabled

Variations:

Avatar

Bordered

Fluid

Rounded

Circular

Aligned

Top aligned

Middle aligned

Bottom aligned

Centered

Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.

Spaced

Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.

Floated

Size

Group of images

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`size`	`enum`		Images size One of: `mini` `tiny` `small` `medium` `large` `big` `huge` `massive`

Images

Just a group of images

Controlled basic input

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`unknown`	`input`
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`actionComponent`	`custom`		Action component
`actionPosition`	`enum`	`right`	Action position One of: `left` `right`
`fluid`	`bool`		An input can take the size of its container
`icon`	`string`		Render icon
`iconPosition`	`enum`	`right`	Icon position One of: `left` `right`
`iconComponent`	`custom`		Pass custom icon component
`inverted`	`bool`		Inverted input
`label`	`string`		Render label for input
`labelComponent`	`custom`		Pass custom label component
`labelPosition`	`enum`	`left`	Label position One of: `left` `right` `left corner` `right corner`
`placeholder`	`string`		Input placeholder
`size`	`enum`		Input size One of: `mini` `tiny` `small` `medium` `large` `big` `huge` `massive`
`state`	`enum`		Input state One of: `focus` `loading` `disabled` `error`
`transparent`	`bool`		Render transparent input
`value`	`string`		Input value

Input

Without value will be uncontrolled input

With value provided will be controlled input

States

Focused:

Disabled:

Error:

Loading:

Loading state will always add automatically icon, even if you provided different

Variations:

Icon input

By default icon is being placed on the right side:

You can control position by iconPosition prop:

You can pass own custom icon component

Labeled input

By default is being placed on the left side:

http://

You can control position too:

Or pass custom label component:

Or you can have labeled icon button:

Users

Or more handy using custom label component:

Add tag

Left/right corner labels requires custom label class:

right

Action

Input can be linked with some action component, usually with button:

Want button with dropdown? This is not a problem!

Note: Usually you'll want to encapsulate this logic into your own component

You've typed .com

Transparent

Simple

Transparent with icon

Inverted

Fluid

Size

Label detail element

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes

Detail

Used in label to specify additional content

Veronika

Friend

Label

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`attached`	`enum`		A label can attach to a content segment One of: `top` `bottom` `top right` `top left` `bottom left` `bottom right`
`basic`	`bool`		A label can reduce its complexity
`circular`	`bool`		A label can be circular
`color`	`string`		A label can have different colors
`corner`	`union`		A label can position itself in the corner of an element One of type: `enum` `bool`
`empty`	`bool`		Empty label
`floating`	`bool`		A label can float above another element
`horizontal`	`bool`		A horizontal label is formatted to label content along-side it horizontally
`image`	`string`		Add image to the label
`link`	`bool`		Format label as link (uses tag)
`pointing`	`union`		A label can point to content next to it One of type: `enum` `bool`
`ribbon`	`union`		A label can appear as a ribbon attaching itself to an element. One of type: `enum` `bool`
`size`	`string`		A label can be small or large
`tag`	`bool`		A label can appear as a tag

Label

Image label

Elliot

Joe

Stevie

Image label with detail

Veronika

Friend

Jenny

Student

Jenny

Co-worker

And with icon

Veronika

Jenny

Pointing

Corner

Note: Image will be automatically wrapped into div

Tag

New

Upcoming

Featured

Ribbon

Overview

Account details

Community

User reviews

Specs

Reviews

Horizontal

Fruit

Kumquats

Floating

Detail content

Docs

214

Icon content

Mail

Tag

Image content

This is not image label!

Elliot

Stevie

Link

24 24

Circular

Empty

Basic

Pointing

Elliot

Color pointing

Blue

Colored

Red

Orange

Yellow

Olive

Green

Teal

Purple

Pink

Brown

Grey

Black

Size

Mini

Tiny

Small

Medium

Large

Big

Huge

Massive

Group of labels which can share same size, shape or color

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`circular`	`bool`		Labels can share shapes
`color`	`string`		Labels can share colors together
`tag`	`bool`		Labels can share tag formatting
`size`	`string`		Labels can share sizes together

Labels

Group labels

Size

Fun

Happy

Smart

Witty

Color

Fun

Happy

Smart

Tag group

$10

$19

$33333

$999999999999999999

Circular group

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`aligned`	`enum`		Controls content alignment for all items in list One of: `top` `middle` `bottom`
`animated`	`bool`		A list can animate to set the current item apart from the list
`celled`	`union`		Cell type One of type: `enum` `bool`
`floated`	`enum`		Controls content floating for all items in list One of: `right` `left`
`horizontal`	`bool`		A list can be formatted to have items appear horizontally
`inverted`	`bool`		A list can be inverted to appear on a dark background
`link`	`bool`		A list can be specially formatted for navigation links
`relaxed`	`bool`		A list can relax its padding to provide more negative space
`selection`	`bool`		A selection list formats list items as possible choices
`size`	`string`		A list can vary in size
`type`	`enum`		Type of the list Bulleted: mark items with a bullet Ordered: mark items with a number One of: `bulleted` `ordered`

List

A list groups related content

Examples:

Apples

Pears

Oranges

Semantic UI

New York, NY

test@test.com

Updated 10 mis ago

Updated 22 mins ago

Source files for project

Your site's name

Theme sfolder

Another folder

Types

Bulleted

Gaining access

Inviting Friends

Benefits

Test 1

Test 2

Ordered

Gaining access

Inviting Friends

Benefits

Test 1

Test 2

Link list

ListItem 1

ListItem 2

ListItem 3

Content

Simple item

Item with icon

by default image prop is assumed as icon name

test

Description

Inline text

Item with image

Note: by default image is assumed as avatar image since it's most common case, you can provide custom image component to override

Test

Description

Custom Image/Icon component

test

Test

Right floated component

Lena

Item with header

test text

another text

Variations

Horizontal list

Top person

Inverted list

Test 1

Selection list

Top person

Animated list

Top person

Relaxed

Top person

Divided

Celled

Size

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`active`	`bool`		Mark item as active. Valid only for link list
`contentAligned`	`enum`		Content alignment One of: `top` `middle` `bottom`
`image`	`string`		Image/Icon name
`imageType`	`enum`	`icon`	Type of image/icon One of: `image` `icon`
`imageComponent`	`custom`		Image/Icon component. Override to tune
`rightFloatedComponent`	`custom`		Right floated content component. If not provided, then right floated content will not be rendered

ListItem

Provides common abstraction around list item

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`centered`	`bool`		Loaders can appear inline centered with content
`inline`	`bool`		Loaders can appear inline with content
`inverted`	`bool`		Loaders can have their colors inverted.
`size`	`enum`		Loaders can have different sizes One of: `mini` `tiny` `small` `medium` `large` `big` `huge` `massive`
`state`	`enum`		Loader state One of: `active` `indeterminate` `disabled`
`text`	`bool`		A loader can contain text

Loader

Loaders are hidden unless active or inside active dimmer

Text Loader

States

Indeterminate

Preparing

Active

Without dimmer need to give state="active"

Disabled

Variations

Inline

Inline centered

Sizes

Inverted

Loaders will automatically be inverted inside inverted dimmer

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`attached`	`bool`		A rail can appear attached to the main viewport
`close`	`union`	`false`	A rail can appear closer to the main viewport One of type: `bool` `enum`
`dividing`	`bool`		A rail can create a division between itself and a container
`floated`	`enum`	Required	A rail can be presented on the left or right side of a container One of: `right` `left`
`internal`	`bool`		A rail can attach itself to the inside of a container
`size`	`enum`		A rail can have different sizes One of: `mini` `tiny` `small` `medium` `large` `big` `huge` `massive`

Rail

Rails display optional accompanying content outside of the main viewport of your website. Sites often use rails with sticky content to fix additional—often optional—content to your viewport as you scroll through the page.

Right rail content

Variations

Internal

Right rail content

Dividing

Right rail content

Attached

Right rail content

Close

Right rail content

Sizes

Right rail content

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`active`	`bool`		An active reveal displays its hidden content
`circular`	`bool`
`disabled`	`bool`
`fade`	`bool`
`image`	`bool`	`false`
`instant`	`bool`
`move`	`union`	`false`	One of type: `enum` `bool`
`rotate`	`union`	`false`	One of type: `enum` `bool`
`size`	`string`	`small`
`type`	`string`

Reveal

First content

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`aligned`	`enum`		A segment can have its text aligned to a side One of: `right` `left` `center`
`attached`	`union`	`false`	A segment can be attached to other content on a page One of type: `enum` `bool`
`basic`	`bool`		A basic segment has no special formatting
`blurring`	`bool`		Blurring segment when used with dimmer
`clearing`	`bool`		A segment can clear floated content
`color`	`string`		A segment can be colored
`container`	`bool`		Container segment
`disabled`	`bool`		A segment may show its content is disabled
`emphasis`	`enum`		A segment can be formatted to appear more or less noticeable One of: `primary` `secondary` `tertiary`
`floated`	`enum`		A segment can appear to the left or right of other content One of: `right` `left`
`inverted`	`bool`		A segment can have its colors inverted for contrast
`loading`	`bool`		A segment may show its content is being loaded
`spacing`	`enum`		Segment spacing One of: `fitted` `padded`
`type`	`enum`		Segment type One of: `raised` `stacked` `piled`
`vertical`	`bool`		A vertical segment formats content to be aligned as part of a vertical group
`zIndex`	`number`		Segment zIndex
`style`	`unknown`	`{}`

Segment

Content

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`compact`	`bool`		Compact segments
`horizontal`	`bool`		Horizontal segments
`inverted`	`bool`		Inverted segments
`type`	`enum`		Type of segments One of: `raised` `stacked` `piled`

Segments

Group of segments

First

Second

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`title`	`string`		A step can contain a title
`description`	`string`		A step can contain a description
`icon`	`string`		A step can contain an icon
`iconComponent`	`custom`		Icon component
`link`	`string`		A step can link
`active`	`bool`		A step can be highlighted as active
`completed`	`bool`		A step can show that a user has completed it
`disabled`	`bool`		A step can show that it cannot be selected

Step

Shipping

Choose your shipping options

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`ordered`	`bool`		Steps can be shown as an ordered sequence
`vertical`	`bool`		Steps can be displayed stacked vertically
`stackable`	`bool`		Steps can stack vertically on smaller screens
`fluid`	`bool`		Steps can take up the width of their container
`attached`	`union`		Steps can be attached to other elements One of type: `enum` `bool`
`equalWidths`	`bool`		Steps can be divided evenly inside their parent
`size`	`enum`		Steps can have different sizes Sizes

Steps

Shipping

Choose your shipping options

Billing

Enter billing information

Confirm Order

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes

Actions

Used in other element markup

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`unknown`	`a`
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes

Author

Used in other element markup

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`aligned`	`enum`		One of: `right` `left` `justified` `center`
`fluid`	`bool`

Container

Semantic-UI container

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`active`	`bool`		True to be active content
`aligned`	`string`		Content vertical alignment. Useful when child of other elements: Item
`extra`	`bool`		Extra content
`floated`	`union`	`false`	Content floating. Useful when child of other elements: Item One of type: `string` `bool`
`hidden`	`bool`		Hidden content
`meta`	`bool`		Meta content
`visible`	`bool`		Visible content
`image`	`bool`		Image content

Content

Used in many other elements as List/Item/Menu content

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`hidden`	`bool`
`visible`	`bool`

Description

Used in other element markup

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes

Summary

Used in other element markup

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`extra`	`bool`

Text

Used in other element markup

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`grouped`	`bool`		Grouped field
`inline`	`bool`		A field can have its label next to instead of above it.
`label`	`string`		Field label
`required`	`bool`		A field can show that input is mandatory
`state`	`enum`		Field state One of: `disabled` `error`
`width`	`number`		Field width in columns

Field

Form field

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`equalWidth`	`bool`		Fields can automatically divide fields to be equal width
`fluid`	`bool`		Fields can have their widths divided evenly
`grouped`	`bool`		Fields can show related choices
`inline`	`bool`		Multiple fields may be inline in a row

Fields

Group of fields in the form

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`unknown`	`form`
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`equalWidth`	`bool`		Forms can automatically divide fields to be equal width
`inverted`	`bool`		A form on a dark background may have to invert its color scheme
`loading`	`bool`		If a form is in loading state, it will automatically show a loading indicator.
`size`	`string`		A form can vary in size
`state`	`enum`		Form state One of: `success` `error` `warning`

Form

Grid column

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`aligned`	`enum`		Horizontal content alignment One of: `right` `left` `center`
`floated`	`enum`		Float to the right or left edge of the row One of: `right` `left`
`only`	`union`		Only visible for types. Could be single type string or array, i.e. only={"mobile","tablet"} One of type: `enum` `enum[]`
`color`	`string`		Column color
`width`	`number`		Column width for all device types
`mobileWidth`	`number`		Column width for mobile
`tabletWidth`	`number`		Column width for tablet
`computerWidth`	`number`		Column width for computer
`largeScreenWidth`	`number`		Column width for large screens
`wideScreenWidth`	`number`		Column width for wide screens
`valigned`	`enum`		Vertical content alignment One of: `top` `middle` `bottom`

Column

Column in grid

Semantic Grid

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`aligned`	`enum`		Horizontal content alignment One of: `right` `left` `center`
`centered`	`bool`		Center columns
`celled`	`union`		Divide rows into cells One of type: `enum` `bool`
`columns`	`number`		Grid column count
`container`	`bool`		Add container class, i.e. ui grid container
`divided`	`union`		Add dividers between ros One of type: `enum` `bool`
`doubling`	`bool`		Double column width on tablet and mobile sizes
`equal`	`bool`		Automatically resize elements to split the available width evently
`padded`	`union`		Preserve gutters on first and las columns One of type: `enum` `bool`
`relaxed`	`union`		Increase size of gutters One of type: `enum` `bool`
`reversed`	`union`		Reverse the order of columns or rows by device One of type: `custom` `custom` `custom` `custom` `custom` `custom`
`stackable`	`bool`		Automatically stack rows into single columns on mobile devices
`valigned`	`enum`		Vertical content alignment One of: `top` `middle` `bottom`

Grid

uno

dos

tres

cuatro

Grid row

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`aligned`	`enum`		Horizontal content alignment One of: `right` `left` `center`
`centered`	`bool`		Center columns in row
`doubling`	`bool`		Double column width on tablet and mobile sizes
`equal`	`bool`		Automatically resize elements to split the available width evently
`only`	`union`		Only visible for types. Could be single type string or array, i.e. only={"mobile","tablet"} One of type: `enum` `enum[]`
`columns`	`number`		Specify row columns count
`stretched`	`bool`		Stretch content to take up the entire column height
`color`	`string`		Row color
`justified`	`bool`		Justified content fits exactly inside the grid column, taking up the entire width from one side to the other
`valigned`	`enum`		Vertical content alignment One of: `top` `middle` `bottom`

Row

Row in grid

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`unknown`	`table`
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`aligned`	`enum`		A table header, row, or cell can adjust its text alignment One of: `top` `bottom`
`basic`	`union`		A table can reduce its complexity to increase readability. One of type: `enum` `bool`
`celled`	`bool`		A table may be divided each row into separate cells
`collapsing`	`bool`		A cell can be collapsing so that it only uses as much space as required
`color`	`string`		A table can be given a color to distinguish it from other tables.
`columns`	`number`		A table can specify its column count to divide its content evenly
`compact`	`union`		A table may sometimes need to be more compact to make more rows visible at a time One of type: `enum` `bool`
`definition`	`bool`
`fixed`	`bool`		A table can use table-layout: fixed a special faster form of table rendering that does not resize table cells based on content.
`inverted`	`bool`		A table's colors can be inverted
`padded`	`union`		A table may sometimes need to be more padded for legibility One of type: `enum` `bool`
`selectable`	`bool`		A table can have its rows appear selectable
`singleLine`	`bool`		A table can specify that its cell contents should remain on a single line, and not wrap.
`size`	`string`		A table can also be small or large
`sortable`	`bool`		A table may allow a user to sort contents by clicking on a table header. NOTE: You need to set "sorted descending"/"sorted ascending" class names for corresponding element
`stackable`	`shape`	`{ computer: false, mobile: false, tablet: false }`	A table can specify how it stacks table content responsively `computer`: `bool` `mobile`: `bool` `tablet`: `bool`
`striped`	`bool`		A table can stripe alternate rows of content with a darker color to increase contrast
`structured`	`bool`		A table can be formatted to display complex structured data
`unstackable`	`shape`	`{ computer: false, mobile: false, tablet: false }`	Reverse of stackable `computer`: `bool` `mobile`: `bool` `tablet`: `bool`
`valigned`	`enum`		A table header, row, or cell can adjust its vertical alignment One of: `center` `right`
`width`	`number`		Table width in grid columns

Table

A table displays a collections of data grouped into rows 4 Themes

Types

Table

A standard table

Tables will automatically stack their layouts for mobile devices. To disable this behavior, use the unstackable variation or tablet stackable to allow responsive adjustments for tablet.

Celled

Header	Header	Header
First	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell
1 2 3 4

Padded

Evidence Rating	Effect	Efficacy	Consensus	Comments
A	Power Output		80% 18 studies	Creatine supplementation is the reference compound for increasing muscular creatine levels; there is variability in this increase, however, with some nonresponders.
A	Weight		100% 65 studies	Creatine is the reference compound for power improvement, with numbers from one meta-analysis to assess potency.

Basic

Employee	Correct Guesses
Lena Human Resources	22
Matthew Fabric Design	15
Lindsay Entertainment	12
Mark Executive	11

Striped

Git Repository
node_modules	Initial commit	10 hours ago
test	Initial commit	10 hours ago
build	Initial commit	10 hours ago
package.json	Initial commit	10 hours ago
Gruntfile.js	Initial commit	10 hours ago

Definition

A table may be formatted to emphasize a first column that defines a rows content

Definition tables are designed to display on a single background color. You can adjust this by changing @definitionPageBackground, or specifying a background color on the first cell

Celled & compact

Name	Registration Date	E-mail address	Premium Plan
John Lilki	September 14, 2013	jhlilk22@yahoo.com	No
Jamie Harington	January 11, 2014	jamieharingonton@yahoo.com	Yes
Jill Lewis	May 11, 2014	jilsewris22@yahoo.com	Yes
Add User

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`unknown`	`td`
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`aligned`	`enum`		Cell text alignment One of: `right` `left` `center`
`collapsing`	`bool`		A cell can be collapsing so that it only uses as much space as required
`selectable`	`bool`		A table cell can be selectable
`singleLine`	`bool`		Content should remain on a single line, and not wrap.
`emphasis`	`enum`		Cell emphasis One of: `negative` `positive` `error` `warning`
`valigned`	`enum`		Vertical cell alignment One of: `top` `bottom` `middle`

Td

Props

Name	Type	Default	Description
`aligned`	`enum`		Cell text alignment One of: `right` `left` `center`
`collapsing`	`bool`		A cell can be collapsing so that it only uses as much space as required
`selectable`	`bool`		A table cell can be selectable
`singleLine`	`bool`		Content should remain on a single line, and not wrap.
`emphasis`	`enum`		Cell emphasis One of: `negative` `positive` `error` `warning`
`valigned`	`enum`		Vertical cell alignment One of: `top` `bottom` `middle`
`component`	`unknown`	`tr`
`children`	`node`		Children nodes
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes

Tr

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`attached`	`union`		A message can be formatted to attach itself to other content One of type: `enum` `bool`
`color`	`string`		A message can be formatted to be different colors
`compact`	`bool`		A message can only take up the width of its content.
`floating`	`bool`		A message can float above content that it is related to
`hidden`	`bool`		A message can be hidden
`icon`	`bool`		A message can contain an icon. If message contain icon as first child then it will be set automatically, unless you provide it explicitly
`size`	`string`		A message can have different sizes
`emphasis`	`enum`		Another emphasis One of: `success` `error` `info` `warning` `positive` `negative`
`visible`	`bool`		Message is visible

Message

Get the best news in your e-mail every day

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`size`	`enum`		A breadcrumb can vary in size Sizes

A standard breadcrumb

Sizes

Divider for breadcrumb

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes

Breadcrumb section

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`active`	`bool`		Section may be active

Controlled accordion

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`animating`	`bool`		Pass false to disable animation
`activeIndexes`	`union[]`	`[]`	Current visible content. Strings and numbers are accepted
`fluid`	`bool`		React.PropTypes.arrayOf(React.PropTypes.oneOfType(React.PropTypes.string, React.PropTypes.number))
`inverted`	`bool`		An accordion can be formatted to appear on dark backgrounds
`onAccordionChange`	`func`	`() => { }`	Callback when accordion wants to be changed
`styled`	`bool`		A styled accordion adds basic formatting

Accordion

Accordion is controlled component, you need to manage active values byself.

This way you can have full control over accordion (you can have multiple active content for example) and reduces boilerplate logic from component

First

First content

Second

Second content

Inverted accordion

Here using strings for title keys instead numbers

First

First content

Second

Second content

Nested styled accordion

First

First content

Nested

Here is another accordion

Nested 1

First nested 1 content

Another Nested

And another...

Nested nested

Hello from deep nest

for simplifity state uses simple structure, you can use nested map for value state or anything what you'd like.

Multiple accordion

Since you're controlling values byself, you can display few secions at same time

First

First content

Second

Second content

Third

Third content

Four

Four content

Five

Five content

If don't need animation

First

First content

Second

Second content

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`labelClassName`	`string`		Apply additional class name to to the label
`checked`	`bool`		State checked
`disabled`	`bool`		Does not allow user interaction
`readOnly`	`bool`		It does disabled, but does not allow user interaction
`onClick`	`func`	`() => { }`	Callback handler to click checkbox
`name`	`string`		Attr name
`type`	`enum`	`default`	Checkbox - appearance One of: `default` `radio` `toggle` `slider`
`fitted`	`bool`		A fitted checkbox does not leave padding for a label

A checkbox allows a user to select a value from a small set of options, often binary

Types

Radio - a lot of

State

Read-only

Disabled

Dimmer

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`enterDuration`	`unknown`	`500`
`leaveDuration`	`unknown`	`300`
`enter`	`unknown`	`fade in`
`leave`	`unknown`	`fade out`
`active`	`bool`	`false`	Hide/Display dimmer
`page`	`bool`	`false`	Page dimmer. Doesn't require dimmable section
`inverted`	`bool`	`false`	Inverted dimmer
`noWrapChildren`	`bool`	`false`	Disables auto-wrapping child contents into
`closePortal`	`func`		internal

Dimmer

Simple dimmer

Blurring / inverted dimmer

Page dimmer

Dropdown menu with animations

Props

Name	Type	Default	Description
`active`	`bool`	`false`	Active/Close menu
`compact`	`bool`		A compact dropdown has no minimum width
`disabled`	`bool`		A disabled dropdown menu or item does not allow user interaction
`error`	`bool`		An errored dropdown can alert a user to a problem
`fluid`	`bool`		A dropdown can take the full width of its parent
`inline`	`bool`		A dropdown can be formatted to appear inline in other content
`floating`	`bool`		A dropdown menu can appear to be floating below an element.
`loading`	`bool`		A dropdown can show that it is currently loading data
`pointing`	`union`		A dropdown can be formatted so that its menu is pointing One of type: `bool` `enum`
`scrolling`	`bool`		A dropdown can have its menu scroll
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`enterDuration`	`unknown`	`200`
`leaveDuration`	`unknown`	`200`
`enter`	`unknown`	`slide down in`
`leave`	`unknown`	`slide down out`
`icon`	`string`	`dropdown`	Menu icon
`label`	`string`		Menu label
`menuComponent`	`custom`		Specify component to be used as Menu. Usually is should be menu but with custom options applied (for example inverted). DropdownMenu will pass some props to your Menu component, so you're responsive for passing it down to the level
`menuValue`	`union`		Menu active value One of type: `number` `string` `union[]`
`onMenuChange`	`func`	`() => { }`	Callback for active item change. Will not be fired if menuValue was omitted Will pass new menuValue or array of new menuValue If all items were unselected would pass null if menuValue is single value or empty array if menuValue is array
`onMenuItemClick`	`func`	`() => { }`	Callback for menu item click
`onRequestClose`	`func`	`() => { }`	Callback will be called when menu wants to be closed (for ex. from outside click)

Dropdown Menu behaves like menu but with dropdown!

You selected:

You can override menu or dropdown with custom menu or component

Select option. This should be used in

Props

Name	Type	Default	Description
`active`	`bool`		Is item active
`disabled`	`bool`		Is item disabled
`color`	`string`		Item color
`menuValue`	`union`	Required	Item value (used in controlled menu) One of type: `number` `string`
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`value`	`union`	Required	Option value One of type: `number` `string`

Option

Should be used in

Select is the dropdown where options could be selected, either single or multiple. Also supports search

Props

Name	Type	Default	Description
`active`	`bool`	`false`	Should be dropdown opened
`compact`	`bool`		A compact dropdown has no minimum width
`disabled`	`bool`		A disabled dropdown menu or item does not allow user interaction
`error`	`bool`		An errored dropdown can alert a user to a problem
`fluid`	`bool`		A dropdown can take the full width of its parent
`inline`	`bool`		A dropdown can be formatted to appear inline in other content
`floating`	`bool`		A dropdown menu can appear to be floating below an element.
`loading`	`bool`		A dropdown can show that it is currently loading data
`pointing`	`union`		A dropdown can be formatted so that its menu is pointing One of type: `bool` `enum`
`scrolling`	`bool`		A dropdown can have its menu scroll
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`enterDuration`	`unknown`	`200`
`leaveDuration`	`unknown`	`200`
`enter`	`unknown`	`slide down in`
`leave`	`unknown`	`slide down out`
`name`	`string`		Name for dropdown input
`icon`	`string`	`dropdown`	Icon name for dropdown
`placeholder`	`string`		String used as placeholder if dropdown has no selected value Will be grayed ( ) if dropdown is selection or normally displayed ( ) otherwise
`search`	`bool`	`false`	Searchable dropdown
`searchGlyphWidth`	`number`	`1.0714`	Search glyph width
`searchIgnoreCase`	`bool`	`true`	Ignore case when performing search
`searchPosition`	`enum`	`dropdown`	Search box position One of: `dropdown` `menu`
`searchHeader`	`string`		Search header, valid only for searchPosition="menu"
`searchNoResultsMessage`	`string`	`No Results found.`	Specify message which will be displayed when search has no results
`allowAdditionsMessage`	`string`	`Press enter to add.`	Specify message which will be displayed when search has no results and allowAdditions enabled
`searchString`	`string`		Search string
`selected`	`union[]`	`[]`	Selected value
`selection`	`bool`	`true`	Behave dropdown as HTML select
`multiple`	`bool`	`false`	Allow multiple selection
`allowAdditions`	`bool`	`false`	Allow to add custom options
`onSelectChange`	`func`	`() => {}`	Callback will be called when current selected value was changed. Will pass array of new selected values as first param and total options count as second
`onRequestClose`	`func`	`() => {}`	Callback will be called when selection dropdown wants to be closed. For now only for outside of dropdown clicks
`onSearchStringChange`	`func`	`() => {}`	Callback will be called when search string is being changed. You probably just need to pass it back to component

Select is the dropdown with ability to select one or few values

Simple select

Option could contain other markup

Selection with search

Selection with allowed additions

Multiple selection

Multiple search selection

Multiple selection with allowed additions

TODO: rewrite these examples

Dropdown could be used with custom component (Mainly with buttons):

simple button

labeled button

Search input could be in menu itself

With header

Modal is modal

Props

Name	Type	Default	Description
`active`	`bool`	`true`	Should be modal visible
`basic`	`bool`		A modal can reduce its complexity
`fullscreen`	`bool`		A modal can use the entire size of the screen
`scrolling`	`bool`		Scrolling content
`size`	`string`		A modal can vary in size
`closePortal`	`func`		Internal
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`enterDuration`	`unknown`	`500`
`leaveDuration`	`unknown`	`500`
`enter`	`unknown`	`scale in`
`leave`	`unknown`	`scale out`
`dimmed`	`enum`		Dimmer variations One of: `blurring` `inverted` `blurring inverted`
`onRequestClose`	`func`	`() => {}`	Callback from outside modal click
`onModalOpened`	`func`	`() => {}`	Callback for modal opening
`onModalClosed`	`func`	`() => {}`	Callback for modal closing
`zIndex`	`number`	`1000`	Overlay zIndex

Modal

Standard modal

Basic modal

Custom animated

Popup with animations

Props

Name	Type	Default	Description
`basic`	`bool`		Basic popup variation
`fluid`	`bool`		Fluid popup
`flowing`	`bool`		No maximum width and continue to flow to fit its content
`inverted`	`bool`		Inverted popup
`size`	`enum`		Popup size One of: `mini` `tiny` `small` `large` `huge`
`wide`	`union`		Make content of popup wide One of type: `bool` `string`
`position`	`enum`	`top left`	Popup position One of: `top left` `top center` `top right` `right center` `bottom right` `bottom center` `bottom left` `left center`
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`enterDuration`	`unknown`	`200`
`leaveDuration`	`unknown`	`200`
`enter`	`unknown`	`scale in`
`leave`	`unknown`	`scale out`
`active`	`bool`	`false`	True to display the popup. If false will be hidden
`autoPosition`	`bool`	`true`	Auto position popup when needed
`distanceAway`	`number`	`0`	Offset for distance of popup from element
`lastResortPosition`	`string`		Use this position when element fails to fit on screen in all tried positions If omitted, the last tried position will be used instead
`offset`	`number`	`0`	Offset in pixels from calculated position
`onRequestClose`	`func`	`() => {}`	Callback when popup wants to be closed (i.e. when offscreen or clicked outside)
`prefer`	`enum`	`adjacent`	When auto-positioning popup use opposite direction or adjacent as next position One of: `adjacent` `opposite`
`preventElementClicks`	`bool`	`true`	If true will prevent clicking on the other elements
`requestCloseWhenOffScreen`	`bool`	`true`	Hide popup when target element scrolls off the screen
`target`	`object`	Required	Target element to apply popup
`zIndex`	`number`	`1000`	Overlay zIndex

Popup:

Just a popup

Custom slide in/out animation

Rating

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`type`	`enum`	`default`	Rating type One of: `default` `star` `heart`
`size`	`enum`		Rating size One of: `mini` `tiny` `small` `medium` `large` `big` `huge` `massive`
`max`	`number`	`5`	Rating max value
`value`	`number`	`0`	Rating value
`onChange`	`func`

Rating

Star rating

Heart rating

Sizes

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`enterDuration`	`unknown`	`200`
`leaveDuration`	`unknown`	`200`
`enter`	`unknown`	`scale in`
`leave`	`unknown`	`scale out`
`emptyHeader`	`string`
`emptyMessage`	`string`
`icon`	`union`	`search`	One of type: `string` `bool`
`loading`	`bool`
`onChange`	`func`	Required
`onSearchClick`	`func`	`function noop() {}`
`placeholder`	`string`	`Search...`
`results`	`union`		One of type: `array` `object`
`value`	`string`

Search

A Search displays a collections of data grouped into list in popup 4 Themes

Types

No icon

Types results

List standard

List objects

Object lists

States

Loading

Props

Name	Type	Default	Description
`aligned`	`enum`		A segment can have its text aligned to a side One of: `right` `left` `center`
`attached`	`union`	`false`	A segment can be attached to other content on a page One of type: `enum` `bool`
`basic`	`bool`		A basic segment has no special formatting
`blurring`	`bool`		Blurring segment when used with dimmer
`clearing`	`bool`		A segment can clear floated content
`color`	`string`		A segment can be colored
`container`	`bool`		Container segment
`disabled`	`bool`		A segment may show its content is disabled
`emphasis`	`enum`		A segment can be formatted to appear more or less noticeable One of: `primary` `secondary` `tertiary`
`floated`	`enum`		A segment can appear to the left or right of other content One of: `right` `left`
`inverted`	`bool`		A segment can have its colors inverted for contrast
`loading`	`bool`		True if display loading spinner
`spacing`	`enum`		Segment spacing One of: `fitted` `padded`
`type`	`enum`		Segment type One of: `raised` `stacked` `piled`
`vertical`	`bool`		A vertical segment formats content to be aligned as part of a vertical group
`zIndex`	`number`		Segment zIndex
`style`	`unknown`	`{}`
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`active`	`bool`		True if tab is active. Being set automatically
`value`	`union`	Required	Tab index value. Should be equal to one of MenuItem value One of type: `string` `number`

Actually it's tab content. Derived from Segment component

Props

Name	Type	Default	Description
`attached`	`enum`		A menu may be attached to other content segments One of: `top` `bottom`
`borderless`	`bool`		A menu item or menu can have no borders
`even`	`bool`		Use equal width for menu items
`fitted`	`union`		A menu item or menu can remove element padding, vertically or horizontally One of type: `bool` `enum`
`fixed`	`union`		A menu can be fixed to a side of its context One of type: `bool` `enum`
`floated`	`enum`		Float left or right One of: `right` `left`
`fluid`	`bool`		A vertical menu may take the size of its container. (A horizontal menu does this by default)
`color`	`string`		A menu can be formatted with different colors
`inverted`	`bool`		A menu may have its colors inverted to show greater contrast
`menuValue`	`union`		Menu active value One of type: `number` `string` `union[]`
`onMenuChange`	`func`	`() => {}`	Callback for active item change. Will not be fired if menuValue was omitted Will pass new menuValue or array of new menuValue If all items were unselected would pass null if menuValue is single value or empty array if menuValue is array
`onMenuItemClick`	`func`	`() => {}`	Callback for menu item click
`pagination`	`bool`		A pagination menu is specially formatted to present links to pages of content
`pointing`	`bool`		A menu can point to show its relationship to nearby content
`secondary`	`bool`		A menu can adjust its appearance to de-emphasize its contents
`tabular`	`bool`		A menu can be formatted to show tabs of information
`text`	`bool`		A menu can be formatted for text content
`vertical`	`bool`		A vertical menu displays elements vertically..
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes

Supports all menu props You don't need to put menuValue or onMenuChange properties. Tabs component will do it automatically

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`activeTab`	`union`	Required	Active tab value One of type: `number` `string`
`onTabChange`	`func`	`() => {}`	Current tab want's to be changed

Note: Only tabs with attached menu are supported. If you don't need menu for tabs when you don't need to use tabs as well

Four tab is in loading state

First content

Second content

Third content

Four content

Loading tab

First content

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`centered`	`bool`
`col`	`string`
`color`	`string`
`doubling`	`string`
`fluid`	`bool`
`link`	`bool`
`onClick`	`func`

Card

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`link`	`bool`
`onClick`	`func`

Cards

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes

Comment

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`collapsed`	`bool`
`minimal`	`bool`
`threaded`	`bool`

Comments

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes

Event

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`size`	`string`

Feed

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`image`	`string`		Item image
`contentAligned`	`enum`		Vertical alignment of content One of: `top` `middle` `bottom`

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`divided`	`bool`		Items can be divided to better distinguish between grouped content
`link`	`bool`		An item can be formatted so that the entire contents link to another page
`relaxed`	`custom`		A group of items can relax its padding to provide more negative space

Group of items

Description

Additional details

Description

Additional details

Description

Additional details

Menu. Could be simple or controlled. Controlled menu will be activated by providing value property and will manage current active item and fire onChange callback when value was changed

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`attached`	`enum`		A menu may be attached to other content segments One of: `top` `bottom`
`borderless`	`bool`		A menu item or menu can have no borders
`even`	`bool`		Use equal width for menu items
`fitted`	`union`		A menu item or menu can remove element padding, vertically or horizontally One of type: `bool` `enum`
`fixed`	`union`		A menu can be fixed to a side of its context One of type: `bool` `enum`
`floated`	`enum`		Float left or right One of: `right` `left`
`fluid`	`bool`		A vertical menu may take the size of its container. (A horizontal menu does this by default)
`color`	`string`		A menu can be formatted with different colors
`inverted`	`bool`		A menu may have its colors inverted to show greater contrast
`menuValue`	`union`		Menu active value One of type: `number` `string` `union[]`
`onMenuChange`	`func`	`() => {}`	Callback for active item change. Will not be fired if menuValue was omitted Will pass new menuValue or array of new menuValue If all items were unselected would pass null if menuValue is single value or empty array if menuValue is array
`onMenuItemClick`	`func`	`() => {}`	Callback for menu item click
`pagination`	`bool`		A pagination menu is specially formatted to present links to pages of content
`pointing`	`bool`		A menu can point to show its relationship to nearby content
`secondary`	`bool`		A menu can adjust its appearance to de-emphasize its contents
`tabular`	`bool`		A menu can be formatted to show tabs of information
`text`	`bool`		A menu can be formatted for text content
`vertical`	`bool`		A vertical menu displays elements vertically..

Controlled menu

Selected: test1

You can wrap menuitem with custom component as well

Menu/Dropdown item

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`active`	`bool`		Is item active
`disabled`	`bool`		Is item disabled
`color`	`string`		Item color
`menuValue`	`union`	Required	Item value (used in controlled menu) One of type: `number` `string`

Menu Item used in menu or dropdown/select

Statistic is view of elements. It could be statistic view or part of view

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`value`	`custom`		A string or number that represents the value of statistic
`label`	`custom`		A string or number that represents the label of a statistic
`horizontal`	`bool`	`false`	A statistic can present its measurement horizontally
`color`	`enum`		A SemanticUI color class. Colors
`inverted`	`bool`	`false`	Styles the component for a dark background.
`floated`	`enum`		Forces to component to float left or right. One of: `right` `left`
`size`	`enum`		Adds a SemanticUI size class. Sizes

Statistic

A statistic can display a value with a label above or below it by the order you set.

Label below:

5,500

Downloads

Label above:

views

40,509

But you can build a default label-below Statistic by single-line:

5,500

Downloads

Horizontal Statistic

A statistic can present its measurement horizontally.

5,500

Downloads

Colored

A statistic can be formatted to be different colors

red

orange

yellow

olive

green

teal

blue

violet

pupple

pink

brown

grey

Inverted

red

orange

yellow

olive

green

teal

blue

violet

pupple

pink

brown

grey

Floated

2,204

Views

Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.

2,204

Views

Size

A statistic can vary in size.

2,204

Views

2,204

Views

2,204

Views

2,204

Views

2,204

Views

2,204

Views

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`even`	`bool`
`color`	`string`
`size`	`string`

Statistics:

Statistic Group

faves

31,200

views

members

A statistic can contain a numeric, icon, image, or text value

Flights

Evenly Divided

saves

Three
Thousand

signups

Team Members

Props

Name	Type	Default	Description
`children`	`node`		Children nodes
`component`	`custom`	`div`	Use other component for composing results:
`defaultClasses`	`bool`	`true`	Apply default semantic UI classes for component, for example ui button
`className`	`string`		Additional CSS ui classes
`text`	`bool`	`false`	Text value

Value

A Value can render as text.

Three
Thousand

Signups

Props

Standard Buttons

Emphasis Button

Animated Button

Basic button

Colored button

Inverted

States

Sizes

Compact

Toggle

Props

Props

IconButton is just button with icon

Can use other button props

With caption

Props

Labeled Button

With button icon and label

By default label placement is the right, you can change it to left side

You can control label by passing labelComponent

You can have icon instead as label

You can pass other Button props to the LabeledButton

Control icon for icon labeled button

Props

Social buttons

If doesn't contain any children when being rendered as IconButton

Supports almost all standard Button properties

If contain children when renders as Button with icon

Props

Divider

Types

Divider

Vertical Divider

Horizontal Divider

Props

Just a flag

Props

Header

First Header

First Header

First Header

First Header

First Header

You can use div with size for header also

Icon header:

Header with icon content

Image header:

Header could be disabled

Variations

Dividing:

Block:

Attached header

Top Attached

Attached

Bottom Attached

Floating:

Go forward

Go back

Text Alignment

Right

Left

This should take up the full width even if only one line

Center

Colored

Header

Header

Header

Header

Header

Header

Header

Header

Header

Header

Header

Header

Inverted

Header

Header