Corncob Design Language

Buttons

Buttons are built from shared token values and semantic variants. They contain styles for the following states hover, active, focus, and disabled. The default button is the primary variant, and secondary and danger variants are also available. Size modifiers are also available for extra-small through extra-large buttons.

Default Button

Size Modifiers

Medium is the default size and does not require a modifier class.

Size modifiers:

corn-button--xs
corn-button--sm
corn-button--md
corn-button--lg
corn-button--xl

Extra Small

<button class="corn-button corn-button--xs">XS Button</button>

Small

<button class="corn-button corn-button--sm">SM Button</button>

Medium (Default)

This modifier is not necessary for medium buttons, but it can be used for consistency in code when the button size is being dynamically set.

<button class="corn-button corn-button--md">MD Button</button>

Large

<button class="corn-button corn-button--lg">LG Button</button>

Extra Large

<button class="corn-button corn-button--xl">XL Button</button>

Icon Buttons

Icon buttons are used for actions that can be represented by an icon without text. They use the same classes as regular buttons, but also include an icon element. The aria-label attribute should be used to provide a label for screen readers. Add corn-button--icon to the button class list to apply the icon button styles.

Icon Only (xs)

<button class="corn-button corn-button--icon corn-button--xs" aria-label="Close">
  <CloseIcon class="corn-icon" />
</button>

Icon Only (sm)

<button class="corn-button corn-button--icon corn-button--sm" aria-label="Close">
  <CloseIcon class="corn-icon" />
</button>

Icon Only (md)

<button class="corn-button corn-button--icon" aria-label="Close">
  <CloseIcon class="corn-icon" />
</button>

Icon Only (lg)

<button class="corn-button corn-button--icon corn-button--lg" aria-label="Close">
  <CloseIcon class="corn-icon" />
</button>

Icon Only (xl)

<button class="corn-button corn-button--icon corn-button--xl" aria-label="Close">
  <CloseIcon class="corn-icon" />
</button>

Button Tokens

Button styles are built from shared tokens and semantic variants. Below are the tokens used in the button component, which can be found in the button-tokens.css file.

:root {
  --cc-button--height--xs: var(--cc-form--item--size--xs);
  --cc-button--height--sm: var(--cc-form--item--size--sm);
  --cc-button--height--md: var(--cc-form--item--size--md);
  --cc-button--height--lg: var(--cc-form--item--size--lg);
  --cc-button--height--xl: var(--cc-form--item--size--xl);
  --cc-button--icon--size--md: var(--cc-button--height--md);
  --cc-button--icon--size--xs: var(--cc-button--height--xs);
  --cc-button--icon--size--sm: var(--cc-button--height--sm);
  --cc-button--icon--size--lg: var(--cc-button--height--lg);
  --cc-button--icon--size--xl: var(--cc-button--height--xl);
  --cc-button--font-size--md: var(--cc-form--item--font-size--md);
  --cc-button--font-size--xs: var(--cc-form--item--font-size--xs);
  --cc-button--font-size--sm: var(--cc-form--item--font-size--sm);
  --cc-button--font-size--lg: var(--cc-form--item--font-size--lg);
  --cc-button--font-size--xl: var(--cc-form--item--font-size--xl);
  --cc-button--icon--glyph-size--md: var(--cc-form--control--font-size--md);
  --cc-button--icon--glyph-size--xs: var(--cc-form--control--font-size--xs);
  --cc-button--icon--glyph-size--sm: var(--cc-form--control--font-size--sm);
  --cc-button--icon--glyph-size--lg: var(--cc-form--control--font-size--lg);
  --cc-button--icon--glyph-size--xl: var(--cc-form--control--font-size--xl);
  --cc-button--padding--md: var(--cc-form--item--padding);
  --cc-button--corn-icon--size--md: var(--cc-size-2);
  --cc-button--background--hover: var(--cc-gray-90);
  --cc-button--background--active: var(--cc-black);
  --cc-button--border-color--active: var(--cc-gray-100);
  --cc-button--color--disabled: var(--cc-form--item--color--disabled);
  --cc-button--box-shadow--focus: var(--cc-form--item--focus-ring);
  --cc-button--box-shadow--active-focus: var(--cc-form--item--focus-ring--active);
  --cc-button--background--disabled: var(--cc-form--item--background--disabled);
  --cc-button--border-color--disabled: var(--cc-form--item--border-color--disabled);
  --cc-button--background: var(--cc-gray-100);
  --cc-button--color: var(--cc-white);
  --cc-button--border-width: var(--cc-border--width);
  --cc-button--border-style: var(--cc-border--style);
  --cc-button--border-color: var(--cc-border--color);
  --cc-button--border-radius: var(--cc-border--radius);
  --cc-button--border-radius--xs: var(--cc-border--radius--xs);
  --cc-button--border-radius--round: var(  --cc-border--radius--round);
  --cc-button--secondary--background: rgb(from var(--cc-gray-20) r g b / 40.2%);
  --cc-button--secondary--color: var(--cc-gray-90);
  --cc-button--secondary--background--hover: rgb(from var(--cc-gray-80) r g b / 15.8%);
  --cc-button--secondary--color--hover: var(--cc-gray-100);
  --cc-button--secondary--background--active: rgb(from var(--cc-gray-80) r g b / 20.8%);
  --cc-button--danger--background: var(--cc-red-80);
  --cc-button--danger--border-color: var(--cc-red-100);
  --cc-button--danger--color: var(--cc-red-10);
  --cc-button--danger--background--hover: var(--cc-red-90);
  --cc-button--danger--color--hover: var(--cc-red-20);
  --cc-button--danger--background--active: var(--cc-red-100);
  --cc-button--danger--color--active: var(--cc-red-10);
  --cc-button--transition--duration: var(--cc-transition--time);
  --cc-button--transition--easing: var(--cc-transition--easing);
}