UNPKG

carbon-components

Version:

The Carbon Design System is IBM’s open-source design system for products and experiences.

199 lines (195 loc) • 5.35 kB
/** * Copyright IBM Corp. 2016, 2018 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ 'use strict'; const { prefix } = require('../../globals/js/settings'); module.exports = { default: 'primary', context: { prefix, }, variants: [ { name: 'primary', label: 'Primary Buttons', notes: 'Primary buttons should be used for the principle call to action on the page.', context: { variant: 'primary', hasIconOnly: true, }, }, { name: 'primary--field', label: 'Primary Buttons (Field)', notes: ` "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. Field buttons match the height of input elements that they sit next to. `, context: { variant: 'primary', field: true, hasIconOnly: true, }, }, { name: 'primary--small', label: 'Primary Buttons (Small)', notes: ` Small buttons may be used when there is not enough space for a regular sized button. This issue is most found in tables. Small button should have three words or less. `, context: { variant: 'primary', small: true, hasIconOnly: true, }, }, { name: 'secondary', label: 'Secondary Buttons', notes: 'Secondary buttons should be used for secondary actions on each page.', context: { variant: 'secondary', hasIconOnly: true, }, }, { name: 'secondary--field', label: 'Secondary Buttons (Field)', notes: ` "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. Field buttons match the height of input elements that they sit next to. `, context: { variant: 'secondary', field: true, hasIconOnly: true, }, }, { name: 'secondary--small', label: 'Secondary Buttons (Small)', notes: ` Small buttons may be used when there is not enough space for a regular sized button. This issue is most found in tables. Small button should have three words or less. `, context: { variant: 'secondary', small: true, hasIconOnly: true, }, }, { name: 'tertiary', label: 'Tertiary Buttons', notes: 'Tertiary buttons should be used for tertiary actions on each page.', context: { variant: 'tertiary', hasIconOnly: true, }, }, { name: 'tertiary--field', label: 'Tertiary Buttons (Field)', notes: ` "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. Field buttons match the height of input elements that they sit next to. `, context: { variant: 'tertiary', field: true, hasIconOnly: true, }, }, { name: 'tertiary--small', label: 'Tertiary Buttons (Small)', notes: ` Small buttons may be used when there is not enough space for a regular sized button. This issue is most found in tables. Small button should have three words or less. `, context: { variant: 'tertiary', small: true, hasIconOnly: true, }, }, { name: 'danger', label: 'Danger Buttons', notes: 'Danger buttons should be used for a negative action (such as Delete) on the page.', context: { variant: 'danger', danger: true, }, }, { name: 'danger--field', label: 'Danger Buttons (Field)', notes: ` "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. Field buttons match the height of input elements that they sit next to. `, context: { variant: 'danger', field: true, }, }, { name: 'danger--small', label: 'Danger Buttons (Small)', notes: ` Small buttons may be used when there is not enough space for a regular sized button. This issue is most found in tables. Small button should have three words or less. `, context: { variant: 'danger', danger: true, small: true, }, }, { name: 'ghost', label: 'Ghost Buttons', context: { variant: 'ghost', }, }, { name: 'ghost--field', label: 'Ghost Buttons (Field)', notes: ` "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. Field buttons match the height of input elements that they sit next to. `, context: { variant: 'ghost', field: true, }, }, { name: 'ghost--small', label: 'Ghost Buttons (Small)', notes: ` Small buttons may be used when there is not enough space for a regular sized button. This issue is most found in tables. Small button should have three words or less. `, context: { variant: 'ghost', small: true, }, }, ], };