Open UIOpen UI GitHub

Button

Anatomy

  • icon
  • root
  • content

Concepts

small
large
field
mini
tiny
medium
big
huge
massive
An image of the size concept on a Button component in Ant Design.
small
An image of the size concept on a Button component in Ant Design.
large
An image of the size concept on a Button component in Bootstrap.
large
An image of the size concept on a Button component in Bootstrap.
small
An image of the size concept on a Button component in Carbon Design System.
small
An image of the size concept on a Button component in Carbon Design System.
field
An image of the size concept on a Button component in Primer Design System.
small
An image of the size concept on a Button component in Primer Design System.
large
An image of the size concept on a Button component in Semantic UI.
mini
An image of the size concept on a Button component in Semantic UI.
tiny
An image of the size concept on a Button component in Semantic UI.
small
An image of the size concept on a Button component in Semantic UI.
medium
An image of the size concept on a Button component in Semantic UI.
large
An image of the size concept on a Button component in Semantic UI.
big
An image of the size concept on a Button component in Semantic UI.
huge
An image of the size concept on a Button component in Semantic UI.
massive

primary
accent
contained
An image of the primary concept on a Button component in Ant Design.
An image of the primary concept on a Button component in Bootstrap.
An image of the primary concept on a Button component in Carbon Design System.
An image of the primary concept on a Button component in FAST.
accent
An image of the primary concept on a Button component in Material Components Web.
contained
An image of the primary concept on a Button component in Primer Design System.
An image of the primary concept on a Button component in Semantic UI.

ghost
outline
tertiary
outlined
basic
An image of the outline concept on a Button component in Ant Design.
ghost
An image of the outline concept on a Button component in Bootstrap.
An image of the outline concept on a Button component in Carbon Design System.
tertiary
An image of the outline concept on a Button component in FAST.
An image of the outline concept on a Button component in Material Components Web.
outlined
An image of the outline concept on a Button component in Primer Design System.
An image of the outline concept on a Button component in Semantic UI.
basic

link
ghost
stealth
text
invisible
An image of the ghost concept on a Button component in Ant Design.
link
An image of the ghost concept on a Button component in Bootstrap.
link
An image of the ghost concept on a Button component in Carbon Design System.
An image of the ghost concept on a Button component in FAST.
stealth
An image of the ghost concept on a Button component in Material Components Web.
text
An image of the ghost concept on a Button component in Primer Design System.
invisible

icon
icon only
leading icon
octicon
An image of the icon concept on a Button component in Ant Design.
An image of the icon concept on a Button component in Carbon Design System.
An image of the icon concept on a Button component in Carbon Design System.
icon only
An image of the icon concept on a Button component in Material Components Web.
leading icon
An image of the icon concept on a Button component in Primer Design System.
octicon
An image of the icon concept on a Button component in Semantic UI.

danger
negative
An image of the danger concept on a Button component in Ant Design.
An image of the danger concept on a Button component in Bootstrap.
An image of the danger concept on a Button component in Carbon Design System.
An image of the danger concept on a Button component in Primer Design System.
An image of the danger concept on a Button component in Semantic UI.
negative

default
neutral
standard
An image of the default concept on a Button component in Ant Design.
An image of the default concept on a Button component in FAST.
neutral
An image of the default concept on a Button component in Primer Design System.
An image of the default concept on a Button component in Semantic UI.
standard

An image of the disabled concept on a Button component in Ant Design.
An image of the disabled concept on a Button component in Carbon Design System.
An image of the disabled concept on a Button component in Primer Design System.
An image of the disabled concept on a Button component in Semantic UI.

block
fluid
An image of the block concept on a Button component in Ant Design.
An image of the block concept on a Button component in Bootstrap.
An image of the block concept on a Button component in Primer Design System.
An image of the block concept on a Button component in Semantic UI.
fluid

secondary
dark
An image of the secondary concept on a Button component in Bootstrap.
An image of the secondary concept on a Button component in Bootstrap.
dark
An image of the secondary concept on a Button component in Carbon Design System.
An image of the secondary concept on a Button component in Semantic UI.

single toggle
checkbox
toggle
An image of the toggle concept on a Button component in Bootstrap.
single toggle
An image of the toggle concept on a Button component in Bootstrap.
checkbox
An image of the toggle concept on a Button component in Semantic UI.

group
buttons
An image of the group concept on a Button component in Bootstrap.
An image of the group concept on a Button component in Primer Design System.
An image of the group concept on a Button component in Semantic UI.
buttons

circle
circular
An image of the circular concept on a Button component in Ant Design.
circle
An image of the circular concept on a Button component in Semantic UI.

An image of the loading concept on a Button component in Ant Design.
An image of the loading concept on a Button component in Semantic UI.

success
positive
An image of the success concept on a Button component in Bootstrap.
An image of the success concept on a Button component in Semantic UI.
positive

vertical
vertical buttons
An image of the vertical concept on a Button component in Bootstrap.
An image of the vertical concept on a Button component in Semantic UI.
vertical buttons

lightweight
link
An image of the link concept on a Button component in FAST.
lightweight
An image of the link concept on a Button component in Primer Design System.

An image of the dashed concept on a Button component in Ant Design.

An image of the round concept on a Button component in Ant Design.

An image of the warning concept on a Button component in Bootstrap.

An image of the info concept on a Button component in Bootstrap.

An image of the light concept on a Button component in Bootstrap.

An image of the radio concept on a Button component in Bootstrap.

An image of the set concept on a Button component in Carbon Design System.

An image of the close concept on a Button component in Primer Design System.

An image of the count concept on a Button component in Primer Design System.

An image of the counter concept on a Button component in Primer Design System.

An image of the hidden text concept on a Button component in Primer Design System.

An image of the animated concept on a Button component in Semantic UI.

An image of the labeled concept on a Button component in Semantic UI.

An image of the labeled icon concept on a Button component in Semantic UI.

An image of the inverted concept on a Button component in Semantic UI.

An image of the icon buttons concept on a Button component in Semantic UI.

An image of the or concept on a Button component in Semantic UI.

An image of the active concept on a Button component in Semantic UI.

An image of the social concept on a Button component in Semantic UI.

An image of the floated concept on a Button component in Semantic UI.

An image of the colored concept on a Button component in Semantic UI.

An image of the compact concept on a Button component in Semantic UI.

An image of the vertically attached concept on a Button component in Semantic UI.

An image of the horizontally attached concept on a Button component in Semantic UI.

An image of the labeled icon buttons concept on a Button component in Semantic UI.

An image of the equal width concept on a Button component in Semantic UI.