Buttons are clickable elements that are used to trigger actions.
List of all CSS Identifiers.
| Identifier | Description |
|---|---|
button.wfp--btn | Basic styling for <button> elements, crucial for overall appearance and layout. |
button.wfp--btn--icon-reverse | Style for buttons with reversed icons, significant for right-to-left (RTL) language support and icon positioning. |
a, button.wfp--btn--icon-only | Styling for icon-only buttons, key for minimalistic UI designs where icons replace text labels. |
.wfp--btn--primary | Primary button styling, vital for primary actions in the UI, such as 'Submit' or 'Save'. Includes colour and state variations. |
.wfp--btn--primary-solid | Solid variant of primary buttons, crucial for high-visibility areas in the UI. |
.wfp--btn--secondary | Secondary button styling, important for less prominent actions, balancing the UI and providing alternative options. |
.wfp--btn--secondary-solid | Solid version of secondary buttons, used to distinguish from primary buttons while maintaining visibility. |
.wfp--btn--tertiary | Tertiary button styling, useful for low-priority actions in the UI, offering a subtle option. |
.wfp--btn--ghost | Ghost button styling, essential for less intrusive buttons, often used for secondary or tertiary actions with minimal UI impact. |
.wfp--btn--ghost-solid | Solid ghost buttons, blending the minimalism of ghost buttons with the emphasis of solid buttons. |
.wfp--btn--danger | Danger button styling, crucial for actions like 'Delete' or 'Cancel', signaling potential risks or important negative actions. |
.wfp--btn--danger--primary | Primary styling for danger buttons, making critical actions visually distinct. |
.wfp--btn--sm | Small button styling, important for UIs with space constraints or for less prominent actions. |
.wfp--btn--lg | Large button styling, used for prominent actions in the UI, offering better visibility and easier interaction, especially on touch devices. |
.wfp--btn--all-caps | Styles for uppercase text buttons, used for emphasis or stylistic preference, impacting the visual hierarchy in the UI. |
.wfp--btn--secondary + .wfp--btn--primary | Style for a secondary button followed by a primary button, important for layout and spacing in forms or action groups. |
.wfp--btn.wfp--skeleton | Skeleton state styling for buttons, used for loading states or placeholders, providing visual feedback during content loading. |