本文へスキップ

ドキュメント

ボタン

様々なスタイルを持つ、見栄えの良いボタンを簡単に作成できます。

使用方法

このコンポーネントを適用するには、.uk-button クラスと、.uk-button-defaultなどの修飾子を<a>または<button>要素に追加します。ボタンを無効にするには、<button>要素にdisabled属性を追加します。

<a class="uk-button uk-button-default" href=""></a>

<button class="uk-button uk-button-default"></button>

<button class="uk-button uk-button-default" disabled></button>

  • リンク 

  • <p uk-margin>
    <a class="uk-button uk-button-default" href="#">Link</a>
    <button class="uk-button uk-button-default">Button</button>
    <button class="uk-button uk-button-default" disabled>Disabled</button>
</p>

注記 複数のボタンを横に並べて表示する場合、小さいビューポートでスタックした際に、上部にマージンを追加できます。マージンコンポーネントのuk-margin属性を親要素に追加するだけです。

スタイル修飾子

いくつかのスタイル修飾子があります。異なる外観を適用するには、以下のクラスのいずれかを追加します。

クラス 説明
.uk-button-default デフォルトのボタンスタイル。
.uk-button-primary 主要なアクションを示します。
.uk-button-secondary 重要なアクションを示します。
.uk-button-danger 危険またはネガティブなアクションを示します。
.uk-button-text タイポグラフィスタイルを適用します。
.uk-button-link プレーンなリンクスタイルを適用します。 
<button class="uk-button uk-button-primary"></button>

  • <p uk-margin>
    <button class="uk-button uk-button-default">Default</button>
    <button class="uk-button uk-button-primary">Primary</button>
    <button class="uk-button uk-button-secondary">Secondary</button>
    <button class="uk-button uk-button-danger">Danger</button>
    <button class="uk-button uk-button-text">Text</button>
    <button class="uk-button uk-button-link">Link</button>
</p>

サイズ修飾子

ボタンを小さくまたは大きくするには、.uk-button-smallまたは.uk-button-largeクラスを追加します。

<button class="uk-button uk-button-default uk-button-small"></button>

<button class="uk-button uk-button-default uk-button-large"></button>

  • <p uk-margin>
    <button class="uk-button uk-button-default uk-button-small">Small button</button>
    <button class="uk-button uk-button-primary uk-button-small">Small button</button>
    <button class="uk-button uk-button-secondary uk-button-small">Small button</button>
</p>

<p uk-margin>
    <button class="uk-button uk-button-default uk-button-large">Large button</button>
    <button class="uk-button uk-button-primary uk-button-large">Large button</button>
    <button class="uk-button uk-button-secondary uk-button-large">Large button</button>
</p>

幅修飾子

幅コンポーネントの.uk-width-1-1クラスを追加すると、ボタンは全幅になります。

例

  • <button class="uk-button uk-button-default uk-width-1-1 uk-margin-small-bottom">Button</button>
<button class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom">Button</button>
<button class="uk-button uk-button-secondary uk-width-1-1">Button</button>

グループ

ボタングループを作成するには、ボタンの周囲の<div>要素に.uk-button-groupクラスを追加します。それだけです！それ以上のマークアップは必要ありません。

<div class="uk-button-group">
    <button class="uk-button uk-button-default"></button>
    <button class="uk-button uk-button-default"></button>
    <button class="uk-button uk-button-default"></button>
</div>
  • <div>
    <div class="uk-button-group">
        <button class="uk-button uk-button-secondary">Button</button>
        <button class="uk-button uk-button-secondary">Button</button>
        <button class="uk-button uk-button-secondary">Button</button>
    </div>
</div>

<div class="uk-margin-small">
    <div class="uk-button-group">
        <button class="uk-button uk-button-primary">Button</button>
        <button class="uk-button uk-button-primary">Button</button>
        <button class="uk-button uk-button-primary">Button</button>
    </div>
</div>

<div>
    <div class="uk-button-group">
        <button class="uk-button uk-button-danger">Button</button>
        <button class="uk-button uk-button-danger">Button</button>
        <button class="uk-button uk-button-danger">Button</button>
    </div>
</div>

ドロップダウン付きボタン

ドロップダウンコンポーネントからドロップダウンメニューをトリガーするためにボタンを使用できます。

<!-- A button toggling a dropdown -->
<button class="uk-button uk-button-default" type="button"></button>
<div uk-dropdown></div>
  • <div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Dropdown</button>
    <div uk-dropdown>
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

ドロップダウン付きボタングループ

ボタングループを使用して、左側の標準アクションと右側のドロップダウン切り替えにボタンを分割します。切り替えボタンとドロップまたはドロップダウンを<div>要素でラップし、ユーティリティコンポーネントの.uk-inlineクラスを追加するだけです。

<!-- A button group with a dropdown -->
<div class="uk-button-group">
    <button class="uk-button uk-button-default"></button>
    <div class="uk-inline">

        <!-- The button toggling the dropdown -->
        <button class="uk-button uk-button-default" type="button"></button>
        <div uk-dropdown="mode: click; target: !.uk-button-group;"></div>

    </div>
</div>
  • 
<div class="uk-button-group">
    <button class="uk-button uk-button-default">Dropdown</button>
    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button" aria-label="Toggle Dropdown"><span uk-icon="icon:  triangle-down"></span></button>
        <div uk-dropdown="mode: click; target: !.uk-button-group;">
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </div>
</div>