Button

Explore the Button component and its various usage patterns in Podo UI

Basic Usage

Create buttons by adding color classes to HTML button tags. You can implement various button styles with class names alone.

HTML

<button>Basic Button</button>
<button class="primary">Primary Button</button>
<button class="danger">Danger Button</button>
<button disabled>Disabled Button</button>

Live Examples:

Button Variants

Create buttons for various purposes with 7 semantic colors:

Primary

Primary action

Default

Default button

Info

Informational action

Link

Link-style action

Success

Success/completion action

Warning

Warning action

Danger

Danger/delete action

HTML

<button class="primary">Primary</button>
<button class="default">Default</button>
<button class="info">Info</button>
<button class="link">Link</button>
<button class="success">Success</button>
<button class="warning">Warning</button>
<button class="danger">Danger</button>

Button Styles

Each color variant offers 4 styles (Solid, Fill, Border, Text):

Solid

Default style

<button class="primary">Solid</button>
<button class="success">Solid</button>
<button class="danger">Solid</button>

Fill

Light background

<button class="primary-fill">Fill</button>
<button class="success-fill">Fill</button>
<button class="danger-fill">Fill</button>

Border

Border only

<button class="primary-border">Border</button>
<button class="success-border">Border</button>
<button class="danger-border">Border</button>

Text

Text only

<button class="primary-text">Text</button>
<button class="success-text">Text</button>
<button class="danger-text">Text</button>

Button Sizes

Adjust button sizes using CSS:

HTML

<!-- Small -->
<button class="primary xs">
  xs Button
</button>

<button class="primary sm">
  sm Button
</button>

<button class="primary md">
  md Button
</button>

<button class="primary lg">
  lg Button
</button>

Live Examples:

Text Alignment

Set text alignment within buttons to left, center, or right. The default is center alignment:

HTML

<!-- Center Align -->
<button class="primary">Center Align</button>

<!-- Left Align -->
<button class="primary text-left">Left Align</button>

<!-- Right Align -->
<button class="primary text-right">Right Align</button>

Live Examples:

With Icons:

Using with Icons

Add icons inside buttons for a more intuitive UI:

HTML

<button class="primary">
  <i class="icon-plus"></i>
  Create New
</button>

<button class="success">
  <i class="icon-check"></i>
  Confirm
</button>

<button class="danger">
  <i class="icon-trash"></i>
  Delete
</button>

<!-- Icon only -->
<button class="primary">
  <i class="icon-search"></i>
</button>

Live Examples:

Disabled State

Add the disabled attribute to disable buttons:

HTML

<button class="primary" disabled>Disabled</button>
<button class="success" disabled>Disabled</button>
<button class="danger" disabled>Disabled</button>

Live Examples:

Button Groups

Group multiple buttons together:

HTML

<div style="display: flex; gap: 0.5rem;">
  <button class="primary">Save</button>
  <button class="default">Cancel</button>
</div>

<div style="display: flex; gap: 0.5rem;">
  <button class="primary">
    <i class="icon-arrow-left"></i>
    Previous
  </button>
  <button class="primary">
    Next
    <i class="icon-arrow-right"></i>
  </button>
</div>

Live Examples:

Using in SCSS

Customize button styles in SCSS modules:

component.module.scss

@use 'podo-ui/mixin' as *;

.customButton {
  display: flex;
  align-items: center;
  gap: s(2);
  padding: s(3) s(5);
  background: color(primary-base);
  color: color(primary-reverse);
  border: none;
  border-radius: r(3);
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background: color(primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  &:active {
    background: color(primary-pressed);
    transform: translateY(0);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  i {
    font-size: 16px;
  }
}

.iconOnlyButton {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: color(primary-fill);
  color: color(primary-base);
  border: 1px solid color(primary-outline);
  border-radius: r(2);
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background: color(primary-base);
    color: color(primary-reverse);
  }
}

Complete Variants Showcase

View all color variants and styles at a glance:

PrimaryPrimary action

DefaultDefault button

InfoInformational action

LinkLink-style action

SuccessSuccess/completion action

WarningWarning action

DangerDanger/delete action