Button
A button allows users to perform an action or to navigate to another page.
import * as UI from "@iyk/ui"
export default () => (
<UI.Button kind="solid" size="sm">Button</UI.Button>
)Kind
- Solid
- Highlights the most important call to action on a page. Use sparingly — only one solid button should appear per area, and not every area requires one.
- Outline
- Serves as a primary button in the interface with reduced visual prominence. Opt for this style when a button needs a moderate level of emphasis.
- Shaded
- Designed for header-level actions within the platform. Use this style to subtly emphasize page-level functionality.
- Ghost
- Indicates less pronounced actions, often paired with a primary button. Ideal for scenarios like modal actions ('Submit' and 'Cancel'), where 'Cancel' is styled as a ghost button.
- Danger
- Used exclusively for actions with potentially danger outcomes, such as deleting or removing user data.
Size
You don’t necessarily need to use the buttons in the order that their labels imply. For example, you don’t always need to use the outline button as the second button in your layout. The most important thing is to establish a visual hierarchy between the buttons in your UI. The only two buttons that we can definitively say we use in certain scenarios are `solid` and `danger`.