Winnie CSS
  1. Primitives
  2. button

button

Trigger an event, action or operation. 

<button data-component="button">
  <i class="fork-knife" data-slot="icon"></i>
  <span data-slot="label">New Dish</span>
<button>

Import

Import just the button styles.

@import "@winnie-ui/css/spatial/button";
@import "@winnie-ui/css/visual/button";

Anatomy

Attach the appropriate data attributes in the structure below.

<button data-component="button">
  <i data-slot="icon"></i>
  <span data-slot="label"></span>
  <span data-slot="pending"></span>
  <kbd data-slot="shortcut">
    <kbd data-component="kbd" />
  </kbd>
</button>

Examples

Size

Use the data-size attribute to change the size.

 
<button data-component="button" data-size="<size>">
  <span data-slot="label">Edit Dish</span>
</button>

Variant

Use the data-variant attribute to change look of the button.

 
<button data-component="button" data-variant="<variant>">
  <span data-slot="label">Edit Dish</span>
</button>

Radius

Use the data-radius attribute to change the radius.

 
<button data-component="button" data-radius="<radius>">
  <span data-slot="label">Edit Dish</span>
</button>

Color

Use the data-accent-color attribute to modify the color of the button. By default the button will inherit the accent color from the closest parent that specifies the data-accent-color attribute.

 
<button data-component="button" data-accent-color="<color>">
  <span data-slot="label">Edit Dish</span>
</button>

Icon

Add an icon with the icon slot attribute as a child of the button.

 
<button data-component="button">
  <i class="fork-knife" data-slot="icon"></i>
  <span data-component="text">New Dish</span>
<button>

Icon Only

Create an icon button by only passing an icon with the icon slot attribute as a child of the button.

 
<button data-component="button">
  <i class="fork-knife" data-slot="icon"></i>
<button>

Shortcuts

Add shortcut identifiers to your button using the shortcut slot and the kbd component. These shortcuts typically only apply to users on screens larger than 768px, so we hide them for any viewport width smaller than that.

 
<button data-component="button">
  ...
  <kbd data-slot="shortcut">
    <kbd data-component="kbd">E</kbd>
  </kbd>
<button>

Pending

If a child of the button is rendered with the pending attribute, any text and icons rendered in the button will be hidden and the pending slot will be rendered.

 
<button data-component="button">
  <span data-slot="pending">
    <i class="loader"></i>
  </span>
  <span data-slot="label">Edit Dish</span>
</button>

Disabled

Use the disabled attribute to prevent user interaction.

 
<button data-component="button" disabled>
  <span data-slot="label">Edit Dish</span>
</button>

Full Width

Use the data-width attribute to modify the overall width of the button.

 
<button data-component="button" data-width="full">
  <i class="fork-knife" data-slot="icon"></i>
  <span data-slot="slot">New Dish</span>
</button>

Reference

button

Groups all of the parts of the button together.

AttributeValue
data-accent-color"red" | "orange" | "yellow" | "green" | "blue" | "purple" | "pink" | "grey" | "brand"
data-radius"none" | "sm" | "md" | "lg" | "round"
data-size"sm" | "md" | "lg"
data-variant"1" | "2" | "3" | "4"
data-width"full"
ModifierDescription
hoveredWhen the button is hovered with a mouse
pressedWhen the button is pressed with a mouse or keyboard
disabledWhen the button prevents user interaction
Variable
--wui-button-<data-variant>-background-<?modifier>
--wui-button-<data-variant>-border-<?modifier>
--wui-button-<data-variant>-box-shadow-<?modifier>
--wui-button-<data-variant>-color-<?modifier>

kbd

Single key in the shortcut slot.

ModifierDescription
disabledWhen the button prevents user interaction
Variable
--wui-button-kbd-<data-variant>-background-<?modifier>
--wui-button-kbd-<data-variant>-border-<?modifier>
--wui-button-kbd-<data-variant>-box-shadow-<?modifier>
--wui-button-kbd-<data-variant>-color-<?modifier>