Themed

This section is intended as a reference for specific use cases of components, or compositions of them, that are not covered in the component's default examples.

Types

Button

A standard button.

You can do the same using shorthands.

Emphasis

A button can be formatted to show different levels of emphasis.

You can do the same using shorthands.

Animated

Buttons can animate to show additional or hidden content.

Labeled

A button can be accompanied by a label.

You can do the same using shorthands.

You can do the same using shorthands.

Icon

A button can be made of only an icon.

You can do the same using shorthands.

Labeled Icon

A button can use an icon as a label.

You can do the same using shorthands.

Basic

The basic button has a subtle appearance.

You can do the same using shorthands.

Inverted

A button can be formatted to appear on a dark background.

Groups

Group

Buttons can exist together as a group.

You can do the same using shorthands.

Icon Group

Button groups can show groups of icons.

You can do the same using shorthands.

Content

Conditionals

Button groups can contain conditionals.

Or buttons can have their text localized, or adjusted by using the text prop.

States

Active

A button can show it is currently the active user selection.

Disabled

A button can show it is currently unable to be interacted with.

Loading

A button can show a loading indicator.

Variations

Social

A button can be formatted to link to a social website.

Size

Buttons can have assorted sizes.

Floated

A button can be aligned to the left or right of its container.

Colored

A button can have different containers.

Compact

Buttons can have reduced padding.

Toggle

A button can be formatted to toggle when active.

Positive

A button can hint towards a positive consequence.

Negative

A button can hint towards a negative consequence.

Fluid

A button can take the width of its container.

Circular

A button can be circular.

Vertically Attached

A button can be attached to the top or bottom of other content.

Horizontally Attached

A button can be attached to the left or right of other content.

Group Variations

Floated Group

Groups can be aligned to the left or right of its container.

Vertical Group

Groups can be formatted to appear vertically.

Icon Group

Groups can be formatted as icons.

Using shorthand icons formats each individual button as an icon button.

Labeled Icon Groups

Groups can be formatted as labeled icons.

Mixed Group

Groups can be formatted to use multiple button types together.

Equal Width

Groups can have their widths divided evenly.

Colored Group

Groups can have a shared color.

Basic Group

A button group can be less pronounced.

Group Sizes

Groups can have a shared size.

Usage

Focus

A button can be focused.

Attached events

A button can be handle all events.

When Button is attached or rendered as non-button element, it losses ability to handle keyboard events when it focused.

However, button behaviour can be replicated with onKeyPress handler. You can find out more details on MDN.

This is the bottom