Select buttons — Wildeye Design System

Try it

Open the menu and choose an alarm type.

Nothing added to Bore 12 yet.

Variant

Size

Drop up

Align

Rows

One choice

Disabled

<WildSelectButtons
  label="Add alarm"
  :options="[
    { Id: 'high', Name: 'High level', icon: 'arrow-up',
      description: 'Reading rises above a threshold' },
    { Id: 'low', Name: 'Low level', icon: 'arrow-down',
      description: 'Reading falls below a threshold' },
    { Id: 'rate', Name: 'Rate of change', icon: 'arrow-trending-up',
      description: 'Level moves faster than a set rate' },
    { Id: 'nodata', Name: 'No data', icon: 'clock',
      description: 'Logger misses its reporting window' },
    { Id: 'battery', Name: 'Low battery', icon: 'battery-0',
      description: 'Supply drops under 3.4 V' },
  ]"
  @button-clicked="addAlarm"
/>

When to use

Use it for one action whose object comes in kinds: Add alarm, Export.
Use it where a row of buttons won’t fit.

Don’t use it

To pick a value that stays chosen. Use Select.
For different actions on one row. Use Menu.

Anatomy

A button, a chevron and a menu of choices.

Button: The shipped button, with an optional leading icon.
Chevron: Turns over while the menu is open. Gone with one choice.
Heading: Optional. It also names the menu for screen readers.
Choice: Icon, label and one line of description. The whole row is the target.

Variants

primary

secondary

borders

<WildSelectButtons buttonClass="btn-borders btn-md" … />

Use primary for the page’s main action, and borders in card headers and toolbars.

Sizes

xs · 32

sm · 36

md · 40

lg · 44

<WildSelectButtons buttonClass="btn-borders btn-sm" … />

Choices

Use labels when words are enough, icons for kinds of thing, and descriptions to tell labels apart.

labels

icons

descriptions

One description puts every row on two lines, so the icons line up.

Placement

The menu opens above by default, or below, at the button’s end or start.

drop up · end

drop up · start

drop down · end

drop down · start

<WildSelectButtons :dropUp="false" align="start" … />

The menu flips when it doesn’t fit and the other side has more room, and scrolls when neither side fits.

One choice

With one choice, the button does it straight away.

Opens a menu of types.

bore 12 · five alarm types

Adds it straight away.

rain gauge 4 · one alarm type

<!-- five types: a menu -->
<WildSelectButtons label="Add alarm" :options="boreTypes" @button-clicked="addAlarm" />

<!-- one type: no menu, no chevron -->
<WildSelectButtons label="Add rainfall alarm" :options="[rainfall]" @button-clicked="addAlarm" />

Name the choice on the button. The event is the same, so calling code doesn’t change.

States

While the menu is open, the button keeps its hover fill.

rest

hover

focus

disabled

pointer on a choice

keys on a disabled choice

A disabled choice stays on the key path, so its description can say why.

In context

Choose an alarm type and it joins the card’s list.

AlarmsBore 12 · Emu Park

High levelAbove 180 kPa · SMS to 2 peopleArmed
No dataNo reading for 2 hours · EmailArmed
Low batteryUnder 3.4 V · EmailPaused

Turn dropUp off in a card header, so the menu drops over the card’s list.

Content

Start with a verb and name the object: Add alarm.
With one choice, name it: Add rainfall alarm.
Keep descriptions to one line, or they’re cut off.

Accessibility

Key	What it does
Enter / Space	Opens the menu, or does the one choice. In the menu, chooses.
↓ / ↑	Opens the menu on the first or last choice. In the menu, moves, wrapping.
Home / End	Moves to the first or last choice.
A letter	Moves to the next choice that starts with it.
Escape	Closes the menu and returns to the button.
Tab	Closes the menu and moves on.

Props

Rows from options[].description down are refined additions.

Prop	Type	Default	Description
label	string	'Add new alarm'	Button text.
options	SelectOption[]	—	Choices, in order, each { Id, Name }.
@button-clicked	(option: SelectOption) => void	—	Fires with the choice.
align	'start' \| 'end'	'end'	Button edge the menu aligns to.
dropUp	boolean	true	Opens above. Flips when it doesn’t fit.
autoSelectSingle	boolean	true	One option: choose it, no menu.
buttonClass	string	'btn-primary btn-medium'	Button variant and size classes.
triggerIcon	string \| null	null	Icon name on the button.
triggerIconOpen	string \| null	null	Icon while the menu is open.
triggerIconPosition	'left' \| 'right'	'right'	Icon side of the label.
options[].description	string	—	One line under the label.
options[].icon	string	—	Icon name before the label.
options[].disabled	boolean	false	Dims the choice. Keys still reach it.
heading	string	—	Menu heading, and its accessible name.
chevron	boolean	true	Trailing chevron that turns over while open.
disabled	boolean	false	Disables the button.

Tokens

Token	Value	Where it lands
--color-primary-hover	#0ABEFF	Primary fill while the menu is open.
--global-blue-1000	#1877F2	Ring on a row the keys reach.
--global-neutral-grey-500	#E6E6E6	Menu outline and icon tile ring.
--global-neutral-grey-300	#F1F1F1	Highlighted row.
--global-neutral-grey-400	#ECECED	Pressed row.
--global-neutral-grey-1000	#4F4D55	Descriptions and the heading.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), …	Menu elevation.